css - 如何在价格表中垂直对齐

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

试试这个:

删除 min-height: 58px; .pricing-table ul li 中的 css 属性并将 padding 属性从 5px 设置为 25px

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