ul li文字垂直居中显示
2015-12-17
在做网页的时候，我们想使用Li、ul、span文字垂直居中对齐，又不想使用table.
那么此时，应该怎么做呢？
CSS代码：
<style type="text/css">
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
background-color: #fff;
}
ul {
display: table;
width: 100%;
list-style: none;
overflow:hidden;
vertical-align: middle;
}
li {
display: table-cell;
padding: 5px;
text-align: center;
word-wrap: break-word;
background-color: #f33;
border-top: 1px solid #ccc;
border-right: 1px solid #ccc;
border-bottom: 1px solid #ccc;
vertical-align: middle;
}
li:first-child {
border-left: 1px solid #ccc;
}
span {
display: block
}
</style>
html代码：
<ul>
<li>11111111</li>
<li>333333333</li>
<li>
<span>454545</span>
<span>454545</span>
</li>
</ul>
样式如图：
特别说明：
此种写法，是一行一个ul，如果换成一行一个Li，那么，li里面我们用多个span，也是可以实现的，但是切记，span不可二次套用spna，否则会达不到居中对齐的目的。
