如何在 ul li 内垂直居中定位标记文本答案

【问题标题】：How to vertically center anchor tag text inside of a ul li如何在 ul li 内垂直居中定位标记文本
【发布时间】：2012-12-07 11:09:44
【问题描述】：

这是我的html：

<ul id="sub_nav" class="block_hide trim no_list no_line" style="display: block; left: 524.5px;">
<li><a href="/path1" class="one">1st button</a></li>
<li><a href="/path2" class="one">2nd button</a></li>
<li><a href="/path3" class="one">3rd button</a></li>
</ul>

如果我目前有的话，我还附上了一张图片。我尝试添加 display: table-cell; 垂直对齐：中间；到锚标记类，但它不起作用我还尝试在锚标记周围添加一个跨度，其类具有：显示：表格单元；垂直对齐：中间；但这也不起作用，在这两种情况下按钮的高度都不是恒定的。

如何使文本垂直居中并保持按钮的高度和宽度相同？

最终选择了 display:table-cell 解决方案，因为它是最跨浏览器的解决方案....起初我不喜欢它，因为我不得不硬编码按钮的宽度而不是 100%，但是一旦我过去，这是一个可靠的解决方案：我的李：

.header #sub_nav li {
    display: table;
    float: left;
    font-size: 11px;
    line-height: 12px;
    margin-bottom: 12px;
    margin-left: 12px;
    width: 86%;
}

我的一个：

    .header #sub_nav li a {
    display: table-cell;
    height: 45px;
    vertical-align: middle;
    width: 111px;
}

【问题讨论】：

请显示css代码或提供网址
您的代码与您的图像不匹配 - 它没用。如果你能建立一个现实的 jsfiddle 会有所帮助。

标签： css html-lists anchor vertical-alignment

【解决方案1】：

我没有足够的 HTML/CSS 知识，但我认为没关系。

在这个答案中，我从UL/LI 中删除了高度并提供了自动高度，并且在锚点<a> 标记中我使用了填充，以显示bigger-height-centralized 按钮。

CSS 部分是：

<style>
html , body , ul , li 
{
    margin:0;
    padding:0;
}
html , body
{
    width:100%;
    height:100%;
}
ul
{
    width:100%;
    height:auto;    
    background-color:red;
}
li
{
    width:33%;
    height:auto;    
    display:inline-block;
    background-color:green; 
}
a
{
    width:100%;
    height:100%;
    text-align:center;
    display:block;
    padding-top:10%;
    padding-bottom:10%;
}
</style>

HTML 部分是：

<body>
<ul>
<li><a href="">tushar</a></li>
<li><a href="">tushar</a></li>
<li><a href="">tushar</a></li>
</ul>
</body>

【讨论】：

【解决方案2】：

试试：

li{
padding-top:20%;
padding-bottom:20%;
}

这将导致 LI 上的顶部/底部填充均匀，但如果一个 LI 包裹而另一个 LI 没有包裹，它们将是不同的高度。

http://jsfiddle.net/VMCH6/1/

【讨论】：

谢谢，但它会导致按钮的高度不同，我试图避免。

【解决方案3】：

如果您使用的是background-image，那么您应该为li.a 元素设置一个固定的宽度高度，并将此hack 用于a 元素：

li a {
    height: 50px;
    width: 300px;
    margin: auto 0;
    display: block;
    display: -webkit-box;
    display: -moz-box;
    display: box;
    -webkit-box-align: center;
    -moz-box-align: center;
    box-align: center;
}

这是一个工作示例（即使您的图像作为背景）。完整的按钮将是可点击的，并且是多行的灵活性：

http://jsfiddle.net/GqBAL/494/

注意：这不是 100% 跨浏览器，但它是最佳解决方案。

【讨论】：

这只会垂直对齐吗？因为我不想水平对齐。它适用于哪些 IE 浏览器？
检查fiddle link用不同的浏览器和IE来检查。 “我不想水平对齐”是什么意思？
我的意思是我不想水平居中。
你可以使用margin/padding来控制，这个例子不是水平居中
此 def 在 Chrome（基于 webkit 的浏览器）中工作，但尚未在其他浏览器上测试...感谢 Tom！

【解决方案4】：

如果你在 li （或 div 等）中只有一项，最简单的方法是将 line-height 设置为与元素的高度相同，并且垂直对齐。我在下面创建了一个简单的小提琴，希望对您有所帮助！ http://jsfiddle.net/fCkLJ/

li {
  /* other styling */
  height: 30px;
  line-height: 30px; 
}

【讨论】：

【解决方案5】：

我做的事情与您的要求相似。将父级定义为“display: table”，元素本身定义为“vertical-align:middle”和“display:table-cell”对我有用。

【讨论】：

它改变了我的按钮的高度

【解决方案6】：

方法有很多，looks here

【讨论】：

此解决方案使用我提到的表格方法对我不起作用。