html - LI中的HTML CSS垂直对齐

Question

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

这是我的垂直按钮菜单，我想让我的文本位于 96x96 方块的底部。

Answer 1

像这样

演示

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 框内对齐。

如果我的假设是正确的，您可以将 a 分配给等于其高度 ( )line-height的元素（块元素）。然后您可以为子链接本身（内联元素）分配一个较小的（例如）并在链接上使用。li96pxline-height20pxvertical-align: bottom;

JSFiddle 示例在这里。