Question

这是我的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; vertical-align：middle;到锚标签类，但它没有工作我也尝试添加一个span锚标签与一个类：display：table-cell; vertical-align：middle;但这也不起作用，在这两种情况下，按钮的高度并不恒定。

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

enter image description here

结束显示：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%;
}

我的a：

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

Answer 1

我做了类似于你所要求的事情。将父级定义为“display：table”，将元素本身定义为“vertical-align：middle”＆amp; “display：table-cell”为我工作。

Answer 2

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

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

Answer 3

尝试：

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

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

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

Answer 4

有很多方法，looks here

Answer 5

如果您使用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％跨浏览器，但是最好的解决方案。

Answer 6

我没有足够的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>

如何在ul li中垂直居中锚标签文本

6 个答案: