CSS垂直內嵌在另一個inline-block的2直列塊

怎麼會這個樣子VS鉻在Firefox不同（文中未對齊相同）
如何將inner：before元素中的文本垂直對齊，最好沒有行高？

DOM中看起來像

<div class="middle"> 
<div class="inner"> Small text </div> 
</div>

CSS的看起來像

.middle { 
    display: inline-block; 
    border: 1px solid black; 
    height: 150px; 
    vertical-align:middle; 
} 

.middle:before { 
    content: ''; 
    height: 100%; 
    display: inline-block; 
    vertical-align:middle; 
} 

.inner { 
    display:inline-block; 
    vertical-align: middle; 
    font-size: 25px; 
    /* height: 30px; */ 
    text-align:center; 
} 

.inner:before { 
    content: "Big Text"; 
    font-size: 50px; 
    display:inline-block; 
    margin-right: 20px; 
    vertical-align: middle; 
    border: 1px solid red; 
    height: 90px; 
}

來源

2014-05-14 hvgotcodes

你能否更詳細地解釋你想怎麼（草圖？）這兩個文本元素將相互定位？是否有邊框用於造型或演示？ –

我剛剛檢出了鉻和FF的小提琴 - 他們都看起來相同 – Danield

@Danield我看到相同的Chrome和FF呈現相同。 –

的inner:before僞元件是一樣使用一個DIV元件與display: inline-block;屬性。

一般在CSS我們用display: table-cell;屬性，使其具有內容的垂直對齊中心或CSS的Flex-盒現代瀏覽器，但在這種情況下的顯示屬性設置爲inline-block，這讓其他別無選擇比line-height（你不想使用）或其他一些黑客推動中間內容。

就我的理解而言，沒有其他選擇。我很想知道是否有人有更好的解釋。

來源

2014-05-14 13:34:38 Dipak

雖然你不喜歡使用line-height這似乎是最好的解決方案。

只需更換height: 90px;與line-height: 90px;，一切都垂直居中。（除非粗的大文本多行文本 - 在這種情況下，行高將無法正常工作）

UPDATED FIDDLE

.inner:before { 
    content: "Big Text"; 
    font-size: 50px; 
    display:inline-block; 
    margin-right: 20px; 
    vertical-align: middle; 
    border: 1px solid red; 
    line-height: 90px; /* <--- */ 
}

來源

2014-05-14 14:05:20 Danield

CSS垂直內嵌在另一個inline-block的2直列塊

回答

相關問題