垂直對齊：中間爲按鈕

layout

我的CSS：

body { 
    background: #e2eaed; 
} 
a { 
    text-decoration: none; 
    color: #fff; 
    font-size: 30px; 
    height: 62px; 
    line-height: 62px; 
    /* vertical-align: middle is not works */ 
    background: #8dc73f; 
    width: 132px; 
    padding: 0 25px; 
    font-size: 16px; 
    text-align: center; 
    font-weight: bold; 
    margin-left: 4px; 
    display: block; 
    float: left; 
}

當按鈕具有1行文字，我的代碼工作好。但是當按鈕有兩行文字時，就像上面的圖片一樣。代碼文本有很大的高度，因爲我使用line-height屬性。我試過vertical-align但它不工作。

請參閱jsfiddle。

來源

2012-12-16 Ozerich

垂直對齊僅影響以表格單元顯示的元素（或嵌入塊，但稍後的效果不同）。這些元素不得浮動。

a { 
    display: table-cell; 
    vertical-align: middle; 

    /* Reset */ 
    float: none; 
    line-height: normal; 
}

來源

2012-12-16 13:19:05 Pavlo

http://jsfiddle.net/nJj2c/4/保證金現在不可見 – Ozerich

@Ozerich表單元格沒有邊距。您可以改爲使用透明邊框。 – Pavlo

謝謝，但也許你知道其他方法？ – Ozerich

另一種方法就是使用flexible boxes：

a { 
    display: inline-flex; 
    align-items: center; /* cross axis */ 
    justify-content: center; /* main axis */ 

    line-height: 1; /* reset */ 
}

您可能需要添加前綴，見browser support和fiddle。

來源

2012-12-16 14:02:55 Pavlo

垂直對齊：中間爲按鈕

回答

相關問題