CSS Align Images and Text on Same Line

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>

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