How to center text vertically in div?

This question already has an answer here:

Vertically align text next to an image? 20 answers

---

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;
}

---

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.

---

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

链接地址: http://www.djcxy.com/p/41530.html

上一篇: 用图像对齐图像

下一篇: 如何在div中垂直居中文本？