How to center text vertically in div?

Question

I know you can do it with a single line by setting the line-height, but my data might take up more than one line. I tried doing something with setting display:table for parent and display:table-cell for the child, but I couldn't get it to work.

Here is my jsfiddle

Rather than copy the data contained therein into a response, for sweet, sweet karma, I will simply give you the link: http://css-tricks.com/vertically-center-multi-lined-text/ — rg88, Mar 01 '13 at 03:58
This is one of the most commonly asked questions on SO, a search would save you some time next outing! http://stackoverflow.com/questions/489340/how-do-i-vertically-align-text-next-to-an-image-with-css/489394#489394 — GordonsBeard, Mar 01 '13 at 03:59
@Stuart - that is the link that I tried before and couldn't get it to work with my example katsh - like I said, I don't want to use a line height because it could be more than one line of text — jas7457, Mar 01 '13 at 04:08
@martriay - I should have written "reputation", actually. Same concept, different site's terminology. — rg88, Mar 01 '13 at 04:19
OK, I added some detail in the form of an answer. Should help. — rg88, Mar 01 '13 at 04:30

score 1 · Answer 1 · answered Mar 01 '13 at 04:24

Well, I played around with the jsFiddle for a bit, and this is what I came up with:

http://jsfiddle.net/rVgkJ/7/

The relevant CSS:

.small_wrapper_div{
    width:100%;
    display:table;
}

.small_wrapper_div > div{
    display:table-cell;
    vertical-align: middle; 
}

.small_picture_div{
    width:50px;
    height:50px;
}

.small_picture_div img {
    width:50px;
    display:block;
}

.small_text_div{
    padding-left:10px;
}

score 1 · Answer 2 · answered Mar 01 '13 at 04:29

In a nutshell you will need to add position: relative to the containing div (small_wrapper_div) and then you can add:

.small_text_div a {
    display: table-cell; 
    vertical-align: middle; 
    text-align: left;    
}

and change .small_text_div to be some combination of:

.small_text_div {
    height:100%;
    padding-left:10px;
    width:250px;
    position: absolute;
    left:50px;
    top: 2px;  
    display: table; 
}

And you will have the text vertically centered.

score 0 · Answer 3 · answered Mar 01 '13 at 06:11

hi use table so you can easily align it vertically

html

<table>
    <tr>
        <td class="image"><img src = "http://www.startingtofeelit.com/wp-content/uploads/2013/02/Wild-Party.jpg"/></td>
        <td>Talib Kweli &#8211; Push Thru (DJ Friendship Remix)</td>
    </tr>
    <tr>
        <td class="image"><img src = "http://www.startingtofeelit.com/wp-content/uploads/2013/02/Wild-Party.jpg"/></td>
        <td>Talib Kweli &#8211; Push Thru (DJ Friendship Remix)</td>
    </tr>
    <tr>
        <td class="image"><img src = "http://www.startingtofeelit.com/wp-content/uploads/2013/02/Wild-Party.jpg"/></td>
        <td>Talib Kweli – Push Thru <br />(DJ Friendship Remix)</td>
    </tr>
</table>

css

table td.image img{
    width:50px;
    height:50px;
}

DEMO

How to center text vertically in div?

3 Answers3