1

这是我的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;
}
4

6 回答 6

6

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

于 2012-12-20T00:45:20.037 回答
5

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

li {
  /* other styling */
  height: 30px;
  line-height: 30px; 
}
于 2012-12-20T00:46:38.977 回答
1

尝试：

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

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

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

于 2012-12-20T02:09:24.920 回答
0

如果你正在使用background-image，那么你应该为元素设置一个固定的宽度高度，li.a并将这个技巧用于 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% 跨浏览器，但它是最好的解决方案。

于 2012-12-20T01:37:47.257 回答
0

方法很多，看这里

于 2012-12-20T00:43:26.070 回答
-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>
于 2014-03-05T06:02:22.923 回答