Html 垂直对齐按钮内的文本 试图为中间的按钮竖直对齐文本，但是我希望整个按钮是一个链接（不仅仅是文本），所以我拉伸了锚标签，现在我不能垂直对齐文本了，即使我把它放在另一个标签中仍然因为某种原因不起作用。 * { margin:0; padding:0; } hr { border:0; height:1px; background-color:#000000; } ul { border-spacing:15px; width:100%; display:table; } li { display:table-cell; background-color:#ccc; height:75px; text-align:center; } a { width:100%; height:100%; display:block; background-color:#FCF; text-decoration:none; opacity:0.5; } <ul> <li> <a href="#">HOME</a> </li> <li> <a href="#">ABOUT</a> </li> <li> <a href="#">ABOUT<HR/>US</a> </li> <li> <a href="#">NEW<hr/>EVENTS</a> </li> </ul> *{ 保证金：0； 填充：0； } 人力资源{ 边界：0； 高度：1px； 背景色：#000000； } 保险商实验室{ 边界间距：15px； 宽度：100%； 显示：表格； } 李{ 显示：表格单元格； 背景色：#ccc； 高度：75px； 文本对齐：居中； } a{ 宽度：100%； 身高：100%； 显示：块； 背景色：#FCF； 文字装饰：无； 不透明度：0.5； }

要点：

• 我喜欢保持按钮自动拉伸到页面宽度，就像现在一样
• 我希望整个按钮区域都可以点击，而不仅仅是文本
• 我喜欢为菜单结构保留无序列表，因为它在语义上对菜单是正确的

最终结果应该是这样的

---

在我看来，在锚定标记中用div包装文本是一种方法，然后使用valign middle，但我无法使其工作。

以下是一种可能适用于您的解决方案：

您需要从锚定标记中删除

disiplay:block

，并通过li元素垂直对齐它们

CSS

li{
//这里还有其他款式吗
垂直对齐：中间对齐；
背景色：#FCF；//BadAdviceGuy的解决方案很好，但如果您希望整个块都可以单击，可以尝试为锚定标记添加流体填充

CSS:

这是我能得到的最接近你想要的：

只适用于一次断线，然后它就散开了=/

* {
    margin:0;
    padding:0;
}
hr {
    border:0;
    height:1px;
    background-color:#000000;
}
ul {
    width:100%;
    list-style:none;
}
li {
    display:inline-block;
    vertical-align:top;
    background-color:#ccc;
    min-width:110px;
    height:75px;
    text-align:center;
    margin:0px 10px;
}
a {
    height:100%;
    display:block;
    background-color:#FCF;
    text-decoration:none;
    opacity:0.5;
    line-height:2em;
}
a span {
    position:relative;
    display:block;
    line-height:1em;
    top:30%;
}

<ul>
    <li> <a href="#"><span>HOME<span></a></li>
    <li><a href="#"><span>ABOUT<span></a></li>
    <li><a href="#"><span>ABOUT <HR/>US<span></a></li>
    <li><a href="#"><span>NEW <HR/>EVENTS<span></a></li>
</ul>

*{
保证金：0；
填充：0；
}
人力资源{
边界：0；
高度：1px；
背景色：#000000；
}
保险商实验室{
宽度：100%；
列表样式：无；
}
李{
显示：内联块；
垂直对齐：顶部；
背景色：#ccc；
最小宽度：110px；
高度：75px；
文本对齐：居中；
利润率：0px 10px；
}
a{
身高：100%；
显示：块；
背景色：#FCF；
文字装饰：无；
不透明度：0.5；
线高：2米；
}
跨度{
位置：相对位置；
显示：块；
线高：1米；
最高：30%；
}






我认为如果不将多行文本包装到另一个元素中，这是不可能实现的，但是一旦完成了，这就非常简单了。假设包装器元素是一个div，只需添加

a div { 
    display:inline-block;
    width:100%;
    vertical-align:middle;
}
a:before {
    content:'';
    height:100%;
    display:inline-block;
    vertical-align:middle;
}

根据
您的解决方案很好，对其进行了升级，但dude希望保持整个块的可点击性。现在只能点击Yap文本而不是整个按钮。在这种情况下，如何将按钮的高度调整为75px？嗯，好的。我没有注意到。嗯，您使用的是表结构，溢出不会因此而隐藏。您可能需要将高度指定给锚定标签，但可能需要为每个项目进行调整。这是什么魔法！？
* {
    margin:0;
    padding:0;
}
hr {
    border:0;
    height:1px;
    background-color:#000000;
}
ul {
    width:100%;
    list-style:none;
}
li {
    display:inline-block;
    vertical-align:top;
    background-color:#ccc;
    min-width:110px;
    height:75px;
    text-align:center;
    margin:0px 10px;
}
a {
    height:100%;
    display:block;
    background-color:#FCF;
    text-decoration:none;
    opacity:0.5;
    line-height:2em;
}
a span {
    position:relative;
    display:block;
    line-height:1em;
    top:30%;
}

<ul>
    <li> <a href="#"><span>HOME<span></a></li>
    <li><a href="#"><span>ABOUT<span></a></li>
    <li><a href="#"><span>ABOUT <HR/>US<span></a></li>
    <li><a href="#"><span>NEW <HR/>EVENTS<span></a></li>
</ul>

a div { 
    display:inline-block;
    width:100%;
    vertical-align:middle;
}
a:before {
    content:'';
    height:100%;
    display:inline-block;
    vertical-align:middle;
}