display: table 实现menu等高居中排列

最新推荐文章于 2022-03-26 13:03:51 发布

weixin_30809333

最新推荐文章于 2022-03-26 13:03:51 发布

阅读量155

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/daisygogogo/p/8967411.html

本文介绍了一种使用CSS实现左侧栏菜单居中的方法，通过将li元素设置为display:table，并将其子元素span设置为display:table-cell来实现垂直居中。此外，还介绍了如何通过增加span元素并设置宽度百分比来实现多行多列居中对齐布局。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

display: table 属性，顾名思义，就是就像表格一样陈列元素，设置这个属性之后，就具有了表格所特有的某些特性，比如居中对齐之类的。

本篇文章要实现的需求也是非常常见的——左侧栏menu菜单居中显示，效果如下图所示

具体的代码如下

<ul>
<li><span class="text">苹果</span></li>
<li><span class="text">橘子</span></li>
<li><span class="text">梨子</span></li>
<li><span class="text">桃子</span></li>
</ul>

具体的css如下

li{
    display: table;
    height: 54px;
    width: 56px;
}
.text {
    display: table-cell;
    width: 56px;
    vertical-align: middle;
    border-bottom: 1px solid black;
    text-align: center;
    color:red;
}

实现原理就是：

1. 每个li元素设置为display:table

2. li元素下面的span设置为display:table-cell；这里的table-cell就相当于每一个td元素，然后再设置vertical-align: middle ，即可实现居中对齐

如果要实现多行多列居中对齐布局，也就是下面这个效果，只需要增加多一个span，给每个span设置宽度百分比，还可以实现按比例分配

<li><span class="text">苹果</span>&nbsp;<span class="text">苹果</span></li>
<li><span class="text">橘子</span>&nbsp;<span class="text">苹果</span></li>
<li><span class="text">梨子</span>&nbsp;<span class="text">苹果</span></li>
<li><span class="text">桃子</span>&nbsp;<span class="text">苹果</span></li>