在內嵌塊定位標記上垂直對齊中間

我需要我的鏈接和按鈕看起來相同，但我一直無法使用與「a」標記相同的方式垂直對齊「a」標記內的文本「按鈕」標籤。需要注意的是，標籤需要能夠處理多行文本（因此行高不起作用）。在內嵌塊定位標記上垂直對齊中間

a,button { 
    display: inline-block; 
    -moz-box-sizing: border-box; 
    width: 150px; 
    height: 150px; 
    vertical-align: middle; 
    border: 1px solid #000; 
    text-align: center; 
}

請參見下面的的jsfiddle：

http://jsfiddle.net/bZsaw/3/

正如你所看到的，我可以得到它裏面並設置一個span標記的組合工作「顯示：表」到「a」並將「display：table-cell」和「vertical-align：middle」設置爲跨度，但在IE7中不起作用。

a,button { 
    width: 150px; 
    height: 150px; 
    border: 1px solid #000; 
    text-align: center; 
} 

a { 
    display: table; 
    -moz-box-sizing: border-box; 
} 

a span, button span { 
    vertical-align: middle; 
    text-align: center; 
} 

a span { 
    display: table-cell; 
}

尋找一個簡單的CSS解決方案。

來源

2012-05-03 Travis

我很抱歉，你必須在20％在所有IE使用率還是擔心IE7 :) –

我們的網站。我每週都會看到這個數字。 :) – Travis

的唯一可靠的方法，我發現對齊文本垂直和允許文本換行，如果它變得太長時間了2容器的方法。

外部容器應具有至少爲內部容器指定的兩倍的線高度。在你的情況下，這意味着以下內容：

a { 
    width: 150px; 
    height: 150px; 
    border: 1px solid #000; 
    text-align: center; 
    line-height: 150px; 
    display: block; 
} 

a span { 
    display:inline; 
    display:inline-table; 
    display:inline-block; 
    vertical-align:middle; 
    line-height: 20px; 
    *margin-top: expression(this.offsetHeight < this.parentNode.offsetHeight ? parseInt((this.parentNode.offsetHeight - this.offsetHeight)/2) + "px" : "0"); 
}

如果你想要一切內聯，添加浮動左標籤。下面是更新例子在A標籤太長文本.. http://jsfiddle.net/bZsaw/13/

您可以設置行高到任何你喜歡的跨度，如果小於母線高度的一半，它會如果文本超出父容器寬度，則允許文本換行。就我所知，這適用於所有現代瀏覽器。

來源

2012-05-03 19:04:42 Gats

接近將其標記爲答案。你能解釋一下「顯示」設置鏈嗎？ – Travis

針對不同的瀏覽器。 – Gats

內嵌塊用於在IE7中觸發hasLayout，這需要發生，它對Mozilla不會產生任何影響。這實際上非常費勁，但最近我們通過這種方式處理了需要垂直對齊到中心的輸入標籤，並將標籤變得太長。非常好地工作。 – Gats

如果您的文本不會大於框的寬度，您可以將行高設置爲等於框的高度。

line-height:150px;

來源

2012-05-03 18:58:28 Jrod

對不起，我應該提到，按鈕和標籤需要能夠處理多行文本。我將編輯該問題。 – Travis

-2

使用line-height:150px;和display-inline:block;

來源

2016-10-06 18:25:35

在內嵌塊定位標記上垂直對齊中間

回答

相關問題