52

I have this code:

<div class = "content-dir-item">
    <p>Text input</p>
    <img src="./images/email.png" class = "mail" alt="img-mail" />
</div>

I would put img inline with text using css. How can I do this?

3 Answers 3

66

Images have display: inline by default.
You might want to put the image inside the paragraph.
<p><img /></p>

2
  • 23
    Doesn't ./ mean in the same directory and ../ mean up one directory? Feb 12, 2014 at 18:47
  • The same can also be applied to <h1> tag and one can put <img> inside it as well to be displayed as inline.
    – InamTaj
    Dec 9, 2014 at 14:48
16

Please make use of the code below to display images inline:

<img style='vertical-align:middle;' src='somefolder/icon.gif'>
<div style='vertical-align:middle; display:inline;'>
Your text here
</div>
1
  • I'm not convinced by the <div style='display:inline;'>. There's <span> that has this exact meaning
    – Naeio
    May 3, 2022 at 18:10
8

This should display the image inline:

.content-dir-item img.mail {
    display: inline-block;
    *display: inline; /* for older IE */
    *zoom: 1; /* for older IE */
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.