How to Have Images in Line with Text in CSS

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

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 put img inline with text

Images have display: inline by default.

You might want to put the image inside the paragraph.

<p><img /></p>

How to align inline image with text?

try putting

.ui-bar-a img{
vertical-align: middle;
}

Making multiple lines of text inline with an image

Try this

<div class="entry">
<div class="wrapper">
<img class="icon" src="https://discordapp.com/assets/dd4dbc0016779df1378e7812eabaa04d.png">
<a class="name">Waisie Milliams Hah Waisie Milliams Hah</a>
</div>
<div class="num">0</div>
</div>

CSS

.wrapper{
display: flex;
align-items: center;
text-align: center;
}

Place text and image in different line

Float:left property of css would be beneficial in doing your work

CSS Positioning with Text and Images on Same Line

You're making it a little more complicated than it needs to be. Just put two elements as wrappers (one you already have in alignImage, set them to display as inline-block and then put the vertical-align to middle, top, or whatever you like. I got rid of all the bizarre padding, which was messing with the display as well. Looks like that was a holdover from your vertically stacked layout.

Edit – You've also got two elements with the ID alignPhoto. You really, really shouldn't do that. If you need to style two different elements with one rule, please use classes instead.

#alignPhoto {

display: inline-block;

vertical-align: middle;

}

#alignPhoto img {

border-radius: 100%;

}

#alignImage {

position: relative;

}

.alignText {

display: inline-block;

vertical-align: middle;

}

.titleBoldText { text-align: right; }
<div class="alignText">

<div class="titleBoldText">Mary Smith</div>

<div id=alignCompany class="titleText">Morris Realty and Investments</div>

</div>

<div id="alignPhoto">

<div class="circle" id=image role="image">

<img src="http://placehold.it/42x42">

</div>

</div>

<br>


Related Topics



Leave a reply



Submit