Question

我想要一列按钮，文本垂直居中，按钮上有块选择，这样点击按钮的任何地方都会导航到链接。

垂直文本对齐不起作用，块也不选择。

<!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
        <head runat="server">
            <title></title>
        </head>
        <style type="text/css">
            ul{
                width:110px;
                display:block;
            }
            li{
                background-image: url(../images/bg_th.gif);
                font: bold 10px Arial, Helvetica;
                height:55px;
                color: #999;        
                text-align:center;
                vertical-align: middle;
                width:110px;
                display:block;
            }
        </style>
    <body>
        <ul>
            <li><a href="fooPage.html" target="innerPane">Button 1</a></li>         
            <li><a href="fooPage.html" target="innerPane">Button 2</a></li>
            <li><a href="fooPage.html" target="innerPane">Button 3</a></li>
        </ul>
            <iframe name="innerPane"src="foo.html"></iframe>
    </body>
    </html>

请协助。

Answer 1

以下是您可能正在寻找的内容

Demo

HTML：

<ul>
    <li><a href="fooPage.html" target="innerPane"><span>Button 1</span></a>

    </li>
    <li><a href="fooPage.html" target="innerPane"><span>Button 2</span></a>

    </li>
    <li><a href="fooPage.html" target="innerPane"><span>Button 3</span></a>

    </li>
</ul>

的CSS：

 ul {
     width:110px;
     display:block;
 }
 li {
     background-image: url(../images/bg_th.gif);
     font: bold 10px Arial, Helvetica;
     height:auto;
     color: #999;
     text-align:center;
     vertical-align: middle;
     display:block;
     border: 1px solid gray;
 }
 a {
     display: block;
     height: 100%;
     width: 100%;
     padding-top: 10px;
     padding-bottom: 10px;
 }
 a:hover {
     background: red;
 }
 a span {
     position: relative;
 }

Answer 2

根据您的问题，有以下两件事需要做。

垂直对齐每个按钮的文本。
不仅是按钮上的文字，而且按钮的整个区域都应该是可点击的。

首先可以通过将{position:relative; display:table-cell; vertical-align:middle}应用于包含文本的元素来解决。此外，您需要将{display:table; vertical-align:middle;}应用于父元素。

其次，锚标记应该应用于您想要的可点击区域。您可以在HTML中交换a和li元素。

请参阅demo。

如果您的意思与问题有所不同，请发表评论。

垂直文本对齐中心＆amp;块选择li

2 个答案: