Position image properly with text

Question

Im trying to make a picture display inline with text on it's right, AND at the same time positioned in the middle of the vertical axis to fit in the navigation bar.

At the moment, I can only get it to display inline but it always verges to the bottom of the bar rather than the top.

HTML:

<div id='profileBar'> <img src='karl.png' width=25 id='profileBarPic'/> Damen </div>

CSS:

#profileBar { float: right; padding-right: 10px; } #profileBarPic { width: 25px; display: inline; float: left; padding-right: 10px; }

What it looks like:

What it looks like

Can't you just change it with adding a small margin-bottom to only the picture? (It's just a guess because it's hard to see where the problem is, a jsfiddle would be handy) — Anton D
– Anton D, Commented Aug 27, 2013 at 17:47

SlightlyCuban · Accepted Answer · 2013-08-27 18:06:01Z

Text next to an image? That's how images have always worked. You can get the desired affect with a lot less markup:

<div id='profileBar'> <img src='http://placekitten.com/50/50' id='profileBarPic'/> Damen </div>

And CSS:

#profileBarPic { vertical-align: middle; }

Fiddle

A little explanation. img is basically an inline element to begin with, so adding float and display: inline is not necessary.

By default img aligns with the baseline of its container (the bottom edge of an image will align with the bottom of a text line it is next to). vertical-align changes where the img should align itself to (in this case, you wanted the middle).

Jamie De Palmenaer · Accepted Answer · 2013-08-27 17:54:24Z

Try uploading a fiddle next time, I think this should fix it though:

#profilebar { float: right; padding-right: 10px; display: table-cell; vertical-align: middle; }

daleyjem · Accepted Answer · 2013-08-27 17:55:32Z

put your text into a span or something so that you can put a display:inline-block on both it and the <img>. This way, you won't need the float:left. Then apply a vertical-align:middle

so:

HTML:

<div id='profileBar'> <img src='karl.png' width='25' id='profileBarPic'/> <span>Damen</span> </div>

CSS:

#profileBar { float: right; padding-right: 10px; } #profileBar span {display:inline-block; vertical-align:middle; } #profileBarPic { width: 25px; display: inline-block; vertical-align:middle; padding-right: 10px; }

Collectives™ on Stack Overflow

Position image properly with text

3 Answers 3

Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Related