Question

我正在尝试在列表项中垂直对齐锚标记，到目前为止我已设法水平对齐它。请参阅下面的代码并查看jsfiddle以获取演示。

HTML

        <div id="header-top"> 
        <div id="header-top-middle">
            <ul>
                <li><a data-icon="&#xe602;" a href="#">1</a></li>
                <li><a data-icon="&#xe600;" a href="#">222222222</a></li>
                <li><a data-icon="&#xe601;" a href="#">3</a></li>
                <li><a data-icon="&#xe603;" a href="#">4</a></li>
            </ul>
        </div>

CSS

#header-top {
    height:30px;
    background-color:#303030;
    width: auto;
    border-bottom: 2px solid #DDDDDD; 
}
#header-top-middle {
    width:1024px;
    margin: 0 auto;
    height:30px;
}
#header-top-middle ul {
    list-style: none; 
    margin: 0; 
    padding: 0; 
}
#header-top-middle ul li {
    border-right: 1px solid #DDDDDD;
    display: inline;
    float: left;
    overflow-x: hidden;
    overflow-y: hidden;
}
#header-top-middle ul li a {
    color: #FFFFFF;
    display: block;
    font-size: 15px;
    height: 30px;
    text-align: center;
    width: 30px;
    text-decoration:none;
}

See jsfiddle

Answer 1

将行高：30px添加到：

http://jsfiddle.net/hRadK/1/

#header-top-middle ul li a {
    color: #FFFFFF;
    display: block;
    font-size: 15px;
    height: 30px;
    text-align: center;
    width: 30px;
    text-decoration:none;
    line-height:30px;
}

Answer 2

您可以将display: table用于列表：

#header-top-middle ul {
    list-style: none; 
    margin: 0; 
    padding: 0; 
    display: table;
}

以及列表项内链接的display:table-cell;和vertical-align: middle;：

#header-top-middle ul li a {
    color: #FFFFFF;
    display: block;
    font-size: 15px;
    height: 30px;
    text-align: center;
    width: 30px;
    text-decoration:none;
    display:table-cell;
    vertical-align: middle;
}

<强> Updated Fiddle

Answer 3

这可能会有所帮助：http://css-tricks.com/centering-in-the-unknown/

在链接中，Chris处理一个宽度和高度未知的元素居中。

Answer 4

#header-top-middle ul li a {
    color: #FFFFFF;
    //display: block;
    font-size: 15px;
    height: 30px;
    text-align: center;
    width: 30px;
    text-decoration:none;
    display:table-cell;
    vertical-align:middle;
}

http://jsfiddle.net/hRadK/8/

Answer 5

尝试this回答中概述的方法，将{1}}中的超链接包装起来并在div上应用垂直对齐。您需要进行的唯一其他修改是删除当前已定义的超链接的块显示。

div

Updated fiddle

垂直对齐<a> tag inside of a list</a>

5 个答案: