垂直居中一行和兩行文字按鈕

我認爲這是一個簡單的行，但我有一排按鈕：一個只是一個短字，兩個是三個長字，所以他們跑到兩條線。垂直居中一行和兩行文字按鈕

我怎樣才能讓他們垂直居中按鈕？我嘗試過一些顯示器的變化：表格單元等，但不能完全正確。

一些代碼：

<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

提前感謝！

來源

2014-03-01 tyler_lisa

#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/重要 - 你必須使用邊框間距，而不是保證金，保證金由於不能應用於顯示：表單元格元素。更多：Why is a div with "display: table-cell;" not affected by margin?

來源

2014-03-01 00:21:41 sinisake

是的，這是我使用display：table-cell的問題......似乎沒有辦法給每個按鈕的左邊添加邊距。非常感謝。 –

垂直居中一行和兩行文字按鈕

回答

相關問題