Question

我认为这是一个简单的按钮，但我有一排按钮：一个只是一个短字，两个是3个长字，所以它们会跑到两行。

如何让它们在按钮中垂直居中？我已经尝试了一些显示变化：table-cell等，但无法完全正确。

一些代码：

<div id="button_menu">  

<ul>
<li class='faq'><a href="#" tabindex="27">FAQs</a></li>
<li class='map'><a href="#" tabindex="28">Interactive Property Map</a></li>
<li class='request'><a href="#" tabindex="29">Request a Presentation</a></li>
</ul>
</div>

Here's my jsfiddle

提前致谢！

Answer 1

#button_menu {
    font-family:"adelle", Georgia, Times, serif;
    font-size:12px;
    font-weight:700;
    float:right;

    position:relative;
}

#button_menu ul{
    list-style:none;
    margin:40px 10px 0px 0px;
    padding:0px;
    display:table;
    border-spacing:5px;
}

#button_menu ul li{
    display: table-cell;
    text-align:center;
    line-height:18px;
    height:45px;    
    padding:0px;
    vertical-align:middle;

   -moz-border-radius: 4px;
   -webkit-border-radius: 4px;
   border-radius: 4px; /* future proofing */
}

JS FIDDLE：http://jsfiddle.net/MFMBR/1/重要 - 你必须使用border-spacing而不是margin，因为margin不能应用于display：table-cell元素。更多：Why is a div with "display: table-cell;" not affected by margin?

垂直居中一行和两行文本按钮

1 个答案: