a tag中span居中

http://www.css-lab.com/demos/vertical-center/vert-align-navbar.html

主要用于生成大的有背景颜色的button样式的链接。

<li><a href="#">
            <span class="outer">
                <span>some longer testing text</span>
            </span></a>
        </li>

li {
float: left;
width: 11em;
height: 4em;
margin-left: -1px;
list-style: none;
border: 1px solid #000;
text-align: center;
font-size: 0.875em;
}

.outer {
position: relative;
display: table;
width: 11em;
height: 4em;
}

.outer span {
display: table-cell;
padding: 0 1em;
vertical-align: middle;
}

效果：

Vertical Aligning Text within Lists Items

• test text
• some longer testing text
• some much longer testing text
• test text