css样式中 li如何居中？

Posted 2023-05-15

.matter-dvs background:#f1f1f1;

.matter-dvs ul

.matter-dvs li

========================以上css========================
========================以下html=======================
<div class="matter-dvs">
<ul>
<li><img src="dv.gif" /></li>
<li><img src="dv.gif" /></li>
<li><img src="dv.gif" /></li>
<li><img src="dv.gif" /></li>
</ul>
</div>

======================问题=========================
======================问题=========================
如何让li居中？ 记得 不是div居中 也不是ul居中 是li居中
我给li加了margin:auto; 不起作用呢..
我想让li基于当前的ul或者div居中
这个li显示的都是图片
我还会让他显示文字 请高手给出完美答案
解答清晰 我加50分

　　1.文字居中定义
　　文字居中始终是要的，所以首先给予ul外层div一个text-align（文本对齐：居中），还可以给一个“溢位：隐藏（overflow: hidden;）”，当然也可以定义一下高和宽。
　　2.ul定义
　　ul不能定义宽度，我们只能给一个定位，类型为相对（position: relative），置入左为50%（left: 50%），当然也可以给一个浮动。请注意，ul千万不能用溢位：隐藏（overflow: hidden;），这样，部分li就无法显示。
　　3.li定义
　　li的定义跟ul差不多，宽度不固定，同样给一个定位，类型为相对（position: relative），置入右为50%（right: 50%），恰恰和ul相反，这样定义后li就可以无论分页多少始终居中了。 参考技术A css样式中li居中的方法：
ul
width:100%;

li
width:100%; text-align:center;
参考技术B 哈哈！又是你。。。。
.matter-dvs liwidth:100%; text-align:center;

浮动，宽度 根据自己的需求设
好了！！
给分。。。。本回答被提问者采纳 参考技术C 两种方式
1】定义li的宽度，然后给li加属性：margin:0 auto;
2]li的父类元素加属性：text-align:center; 参考技术D 让li居中就要设置ul啊！
.matter-dvs ul
text-align:center;

使用 css 在 span 和 li 中垂直居中锚点

【中文标题】使用 css 在 span 和 li 中垂直居中锚点

【英文标题】：Vertically centering an anchor within spans and li with css

【发布时间】：2011-03-24 19:09:34

【问题描述】：

我正在使用 jQuery 选项卡，并在选项卡标题中添加了一些跨度，以便我可以使用背景图像。这是标记：

<ul>
    <li><span class='tab_outer'><span class='tab_inner'><span class='tab'><a href="#orderInfo">
        Order Info</a></span></span></span></li>
    <li><span class='tab_outer'><span class='tab_inner'><span class='tab'><a href="#notes">
        Notes</a></span></span></span></li>
    <li><span class='tab_outer'><span class='tab_inner'><span class='tab'><a href="#eventLog">
        Event Log</a></span></span></span></li>  
</ul>

问题：锚内的文本显示在锚块的最底部。如果我可以将它向上移动三个像素，那就完美了。以下是我认为相关的所有 CSS：

.tab_outer, .tab_inner, .tab

    display: inline-block;
    font-size: 11px;
    list-style: none;


.tab_outer

    margin-bottom: -3px;
    padding-right: 3px;
    margin-top: 4px;


.tab_inner

    margin-bottom: -1px;
    padding-left: 3px;


.tab

    margin-top: 0px;
    padding: 0px 4px 0px 4px;
    margin-bottom: -1px;

【问题讨论】：

这段代码并没有真正显示问题。你能用jsFiddle.net复制它吗？

【参考方案1】：

margin: 0px;
padding: 0px;
vertical-align: super;

【参考方案2】：

试试 line-height 和 vertical-align 属性：

.tab_outer  
  line-height: 32px; /* Put the corresponding size here */
  vertical-align: middle;

或者您可以调整填充：

.tab_outer 
  padding-bottom: 3px;

【讨论】：

你打败了我！ - 设置 line-height 解决了很多很多垂直对齐相关的问题