Vertically align center inside div element

Question

My text have only 1 line and my picture will fit the container height.
I want text and picture to align center vertically.
I try margin top text class with negative value and position relative but nothing work what I really want.

jsfriddle here

HTML

<div id="friend_select">
        <div class="Friend">
            <img class="Picture" src="http://graph.facebook.com/harell/picture?type=square&width=80&height=80" />
            <span class="Name">First Name Last Name 1</span>
        </div>
        <div class="Friend">
            <img class="Picture" src="http://graph.facebook.com/harell/picture?type=square&width=80&height=80" />
            <span class="Name">First Name Last Name 2</span>
        </div>
</div>

CSS

#friend_select{ padding: 5px; width: 400px; height: 500px; }
.Friend{ height: 80px; } 
.Friend .Name{ line-height: 80px; }
.Friend .Picture{ line-height: 80px; width: 80px; height: 80px; }

Here are two simple methods to center an element within a div, vertically, horizontally or both (pure CSS): http://stackoverflow.com/a/31977476/3597276 — Michael Benjamin, Aug 19 '15 at 21:11

score 2 · Accepted Answer · answered Dec 25 '12 at 08:27

2

I propose this fix:

.Friend .Name{ line-height: 80px; vertical-align:top; }

Live demo here: http://jsfiddle.net/keaukraine/WNT7U/

Works in latest Firefox, Chrome and IE down to IE8. For IE7, apply this hack:

.Friend .Name { *zoom:1; }

answered Dec 25 '12 at 08:27

keaukraine

5,315
29
54

Vertically align center inside div element

1 Answers1