css让不同高度的浮动元素垂直居中

<ul class="row">
  <li class="col col-navbar">
    <h1><a href="/">Logo</a></h1>
  </li>
  <li class="col col-navbar">
    <a href="/books">图书</a>
  </li>
  <li class="col col-navbar">
    <a href="/groups">小组</a>
  </li>
</ul>

li是浮动的元素，ul，li的高度均不固定，由于li内部子元素的内容高度不同，元素显示出来不能垂直居中显示，请问要怎样才能做到呢？

用flex，demo没加前缀，用chrome打开
http://codepen.io/lishengzxc/pen/PqJvdz

ul {
  display: flex;
  align-items: center;
}

①首先在ul外面包一层，设置display为table
②其次对ul设置display:table-cell

完成~

修改：不用外层的div了。经检测可行。

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="utf-8">
    <title>Test</title>
    <style>
        ul{
            display:table;
            margin:0;
            padding:0;
            list-style-type:none;
        }
        li{
            display:table-cell;
            vertical-align:middle;
        }
    </style>
</head>
<body>
    <ul>
        <li>aaaa</li>
        <li>bbb<br>bbb</li>
        <li>cc<br>cc<br>cc</li>
    </ul>
</body>
</html>

li {
    display: inline-block;
    verticle-align: middle;
}

注意处理行内元素间隔即可

【热门文章】