垂直对齐按钮内的文本答案

【问题标题】：Vertical align text within button垂直对齐按钮内的文本
【发布时间】：2014-02-14 08:44:54
【问题描述】：

尝试垂直对齐中间按钮的文本，但是我希望整个按钮成为一个链接（不仅仅是文本），所以我拉伸了锚标记，现在我不能再垂直对齐文本了，即使我把它包装进去另一个标签由于某种原因仍然不起作用。

* {
    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>

关键点：

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

http://jsfiddle.net/vWrE8/

最终结果应该是这样的http://i.stack.imgur.com/kKEc8.png

在我看来，用 div 将文本包装在锚标签内是一种方法，然后是 valign-middle，但是我无法让它工作。

【问题讨论】：

标签： html css vertical-alignment menuitem

【解决方案1】：

这是一种可能适合您的解决方案：

Demo Fiddle

您需要从锚标记中删除disiplay:block，并通过he li 元素垂直对齐它们。

CSS

    li {
     // other styles here

      vertical-align: middle;
      background-color:#FCF; //<-move the bg to here
    }

    a {
     // other styles here

     // display:block;
     // background-color:#ccc; 
    }

【讨论】：

你的解决方案很好，赞成它，但老兄想保持整个块可点击。
Yap 只有文本现在可以点击，而不是整个按钮。

【解决方案2】：

如果不将多行文本包装在另一个元素中，我认为这是无法实现的，但是一旦完成，它就会非常简单。假设 wrapper 元素是一个 div，只需添加

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

根据http://jsfiddle.net/vWrE8/9/

【讨论】：

这是什么魔法！？

【解决方案3】：

BadAdviceGuy 的解决方案很好，但是如果您希望整个块都可点击，您可以尝试为锚标记添加流体填充。 Fiddle

CSS：

a {
    width:100%;
    height:100%;
    display:block;
    padding: 50% 0;
    text-decoration:none;
    opacity:0.5;
}

【讨论】：

在这种情况下如何将按钮的高度调整为 75px？
呃，好的。没注意到。好吧，您正在使用表结构并且溢出不会为此隐藏。您可能需要为锚标记分配高度，但这可能需要针对每个项目进行调整。

【解决方案4】：

这是尽可能接近你想要的：http://jsfiddle.net/vWrE8/6/

仅适用于一个换行符，之后它就会崩溃... =/

* {
    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>

【讨论】：