List Items Middle Vertically Aligned

2019-04-18 19:53发布

站内问答 / HTML/CSS
451 2 6

I have the following HTML and CSS that creates a list, where the list items have a min-height set. I would like for the contents of the list items to be vertically aligned in the middle instead of the top if there is not enough content to fill the entire height. How the heck do I pull this off?

<html>
    <head>
        <style type="text/css">
            ul {
                width : 300px;
                list-style-type: none;
            }

            li {
                min-height : 45px;
                vertical-align : middle;
                border-bottom : 1px black solid;
            }
        </style>
    <head>
    <body>
        <ul>    
            <li>Testing testing 1234</li>
            <li>Testing testing 1234 Testing testing 1234</li>
            <li>Testing testing 1234 Testing testing 1234 Testing testing 1234</li>
            <li>Testing testing 1234 Testing testing 1234 Testing testing 1234 Testing testing 1234</li>
            <li>Testing testing 1234 Testing testing 1234 Testing testing 1234 Testing testing 1234 Testing testing 1234</li>
       </ul>
 </body>

Which gives me the following:

enter image description here

2条回答
The star\"
2楼-- · 2019-04-18 20:28

If you add a <div> inside the <li> and make the following changes to the CSS, it seems to work:

li {
    min-height : 45px;
    border-bottom : 1px black solid;
}
li div {
    height:45px;
    display:table-cell;
    vertical-align : middle;
}

See it live here-- works in IE8 and FF4: http://jsfiddle.net/RrVBh/

查看更多
0人赞 添加讨论(0) 举报
迷人小祖宗
3楼-- · 2019-04-18 20:46

Ahh, good ol' vertical align. The easiest way is to set line-height: 45px; but this only works when you have one line of content and will force any additional lines to overflow.

Otherwise, you could use display:table-cell; vertical-align: middle; as demonstrated in the above link.

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(6)