Question

li{
    float: left;
    margin-right: 10px; 
    width: 96px;
    height: 96px;
    vertical-align: bottom;
}

这是我的垂直按钮菜单，我希望我的文字位于96x96方格的底部。

Answer 1

喜欢这个

<强> demo

<强> CSS

li {
    float:left;
    margin-right: 10px;
    width: 96px;
    height: 96px;
    vertical-align: bottom;
    border:1px solid red;
    list-style-type:none;
}
li img{
    display:inline-block;
        height:96px;
    width:96px;
}
li span{
    display:block;

}

<强> HTML

<ul>
    <li><img src="" alt="img"/> <span>1</span></li>
    <li><img src="" alt="img"/> <span>1</span></li>

</ul>

Answer 2

我认为您的意思是您希望链接中的文本在底部的96x96框内对齐。

如果我在该假设中是正确的，您可以将line-height分配给等于其高度（li）的96px元素（块元素）。然后，您可以将较小的line-height（例如20px）分配给子链接本身（内联元素），并在链接上使用vertical-align: bottom;。

JSFiddle example here.

LI中的HTML CSS垂直对齐

2 个答案: