How to Put Img Inline with Text

How to put img inline with text

Images have display: inline by default.

You might want to put the image inside the paragraph.

<p><img /></p>

CSS align images and text on same line

You can either use (on the h4 elements, as they are block by default)

display: inline-block;

Or you can float the elements to the left/rght

float: left;

Just don't forget to clear the floats after

clear: left;

---

More visual example for the float left/right option as shared below by @VSB:

<h4>     <div style="float:left;">Left Text</div>    <div style="float:right;">Right Text</div>    <div style="clear: left;"/></h4>

How to have images in line with text in css

<p> tags are block-level elements. Use an inline element such as <span>:

<div class="footer content">
    <img src="Images/facebook.png" />
    <img src="Images/twitter.png">
    <span> 
        Address line 1
        Address line 2
        Address line 3
    </span>
</div>

Alternatively, if you're able to use CSS, you can define both elements as inline-block:

.footer.content > img,
.footer.content > p {
    display: inline-block;
}

Example 1 jsFiddle

Example 2 jsFiddle

EDIT: It might also be wise for semantics to use <address>, rather than <span>. For example:

<div class="footer content">
    <img src="Images/facebook.png" />
    <img src="Images/twitter.png">
    <address> 
        Address line 1
        Address line 2
        Address line 3
    </address>
</div>

Since <address> is also a block-level element, you'll need to include the correct CSS as follows:

.footer.content > img,
.footer.content > address {
    display: inline-block;
}

Final jsFiddle example

Display image + text inline inside a div

#imggame {  border:  2px solid #EEEEEE;  padding: 15px;  border-radius: 15px;  margin-right: 100px;}img{  width:auto;  height:auto;  max-width:100%;  max-height:100%;}.img-wrap{  float:left;  width:20%;  margin-right:2%;}.desc{  float:right;  width:75%;}.desc p{  margin-top:0;}.clear{  clear:both;}

<h2>Music Maker & Mixer (M3)</h2><div id="imggame">  <div class="img-wrap">    <img src="https://dummyimage.com/200x200/000/fff" width="220px" height="220px" alt="Sample Image" />  </div>  <div class="desc">    <p>Make music, mix and remix! With M3 you have a lot of ways to create your     music, record songs, use your voice and changing it to instruments... And     this all with the better quality! Download now, and share your songs!</p>  </div>  <div class="clear"></div></div>

Trying to align text under inline images using HTML/CSS

you could wrap each img with it's p inside a div and add display:inline-block to that div instead

.inline {    text-align: center;}.wrap {    display: inline-block;    margin: 0 2%;}

<div class="inline">                 <div class="wrap">            <img class="rel" src="http://imgur.com/a/n2skT.png" alt="icon" />            <p> This is a test</p>                    </div>             <div class="wrap">            <img class="rel" src="http://imgur.com/a/n2skT.png" alt="icon" />            <p> This is a test</p>                </div>             <div class="wrap">            <img class="rel" src="http://imgur.com/a/n2skT.png" alt="icon" />            <p> This is a test</p>               </div> </div>

Button image inline with text

Yes...use background-position but that will depend on the look you are going for...which we can't tell without the actual image.

Quick demo...

  .upperLeftButton {    display: inline-block;    background-image: url(http://lorempixel.com/output/abstract-q-c-25-25-7.jpg);    background-repeat: no-repeat;    background-position: center left 25px;    height: 50px;    width: 200px;  }

<button class="upperLeftButton">Check</button>

---

Related Topics