Question

我们想在垂直对齐中心显示li元素。任何想法？

我的css是

.pricing-table ul{border-radius:3px;width:160px;text-align:center;float:left;background-color:#FFF;border-color:#CCC;border-style:solid;border-width:1px;margin:3px;padding:0}
.pricing-table ul li{background-color:#EFEFEF;border-radius:0;list-style:none!important;min-height:58px;border-color:#B83737;border-width:2px;padding:5px}
.pricing-table li:nth-child(odd){background-color:#fff}
.pricing-table ul .heading{color:#000;background-color:#d5d8dd;font-weight:700;font-size:16px}
.pricing-table ul .price{font-weight:700}

我的HTML代码

    <div id="pricing-table" class="pricing-table">
<ul><li>Shimla</li><li>Manali</li><li>Dharamshala, Delhi, Manali, Shimla</li><li>Dalhousie</li><li>Chandigarh</li><li>Delhi</li></ul>
<ul><li>Shimla</li><li>Manali</li><li>Dharamshala</li><li>Dalhousie</li><li>Chandigarh, Delhi, Manali, Shimla</li><li>Delhi</li></ul>                      
</div>

Answer 1

试试这个：

删除 .pricing-table ul li 中的 min-height：58px; css属性并将填充属性设置为 5px至25px

.pricing-table ul li{
    padding: 25px;
}

Answer 2

首先想到......为什么不使用桌子？

第二个想法...使用表格css显示属性，然后你可以使用垂直对齐中间文本中心。

下行...我将文本包装在span元素中...并使用display table，table-row和table-cell来获得正确的结果。

See this Fiddle

<强>的CSS：

.pricing-table ul {
    display: table;
    ...
}
.pricing-table ul li {
    display:table-row;
    ...
}
.pricing-table ul li span {
    display: table-cell;   
    height:58px;
    vertical-align: middle;
}

如何在价格表中垂直对齐

2 个答案: