如何垂直对齐列表？

Question

我试图垂直对齐列表文本，但无法取得成功。

li{
    height: 100px;
    display: inline-block;
    vertical-align: middle;
    border: 1px solid red;
}

jsfiddle

Answer 1

你可以使用display：flex;对于年轻浏览器，如果您不想修改HTML： DEMO

ul{
    width: 50%;
}
li{
    height: 100px;
    display:block;/* or else as fall back to erase bullets */
    display: flex;
    justify-content:center;
    flex-direction:column;;
    border: 1px solid red;
}

如果浏览器不理解display:flex;，则内容将站在最顶层。

---

如果你想在一个额外的容器中包装文本，li的内容，那么display:table / table-cell是可用的： DEMO 或其他伪技术和vertical-align + inline-block;： DEMO

Answer 2

添加line-height: 100px;

    li{
        height: 100px;
        display: inline-block;
        vertical-align: middle;
        border: 1px solid red;
        line-height: 100px;
    }

第二种方法：

<强> HTML

<ul>

    <li>
        <span>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        </span>
    </li>
     <li>
        <span>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        </span>
     </li>
     <li>   
        <span>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        </span>
    </li>
    <li>
        <span>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        </span>
    </li>
</ul>

<强> CSS

ul{
    width: 50%;
}
li{
    display: table;
    border: 1px solid red;
}

span{
  display: table-cell;  
  height: 100px; 
  vertical-align: middle;
}

fiddle

Answer 3

修改

DEMO

<强> HTML

<ul>
    <li><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span></li>
    <li><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span></li>
    <li><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span></li>
    <li><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span></li>
</ul>

<强> CSS

ul{
    width: 50%;
    display:table;
}
li{ 
    display:table-row;
    list-style:none;
    height: 100px;
  }

li > span{

    display:table-cell;
    vertical-align:middle;
    border:1px solid red;

}

Answer 4

如何使用此解决方案。而不是在height上给padding提供一些li。

检查 DEMO 。

ul{
    width: 50%;
}
li{
    display: inline-block;
    padding:20px 0;
    vertical-align:middle;
    border:1px solid red;
    text-align:center;
}

Answer 5

使用display table-cell

li {
       display:table-cell;
       height: 100px;
       border: 1px solid red;
       vertical-align:middle;
       width:500px; /*example width as width wont work with table-cell*/
}