Question

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

* {
    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中使用div包装文本是一种方法，然后是valign-middle，但是我无法使其工作。

Answer 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; 
    }

Answer 2

如果不将多行文本包含在另一个元素中，我认为这是不可能实现的，但一旦完成，它就非常简单。假设包装元素是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/

Answer 3

BadAdviceGuy的解决方案很好，但鉴于您希望整个块可以单击，您可以尝试为锚标记填充流体。 Fiddle

CSS：

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

Answer 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>

按钮内的垂直对齐文本

4 个答案: