如何垂直對齊2種不同大小的文本？

我知道垂直對齊文本到塊的中間，您將行高設置爲與塊的高度相同。如何垂直對齊2種不同大小的文本？

但是，如果我有一句中間有一個詞，那就是2em。如果整個句子的行高與包含塊相同，則較大的文本將垂直對齊，但較小的文本與較大的文本位於同一基線上。

如何設置它使兩個文本的大小都是垂直對齊的，因此較大的文本將位於比較小的文本更低的基線上？

2010-10-22 JD Isaacks

118

嘗試vertical-align:middle; online containers？

編輯：它的工作原理，但所有的文字必須是一個內嵌的容器，就像這樣：

<div style="height:100px; line-height:100px; background:#EEE;"> 
 
     <span style="vertical-align:middle;">test</span> 
 
     <span style="font-size:2em; vertical-align:middle;">test</span> 
 
    </div>

來源

2010-10-22 14:54:09 MatTheCat

我一直以爲'垂直-align：middle'只用於'table-cell'！ – 2014-10-30 21:20:05

如果我想讓第二個跨度正確地浮動，這似乎失敗了。然後它的頂部對齊：[jsfiddle]（http://jsfiddle.net/Lszdx2hd/）任何想法如何使它與浮動工作？ – philk 2014-10-31 23:27:44

是否有必要設置父div的高度和線條樣式？ – lexeek 2015-11-24 01:26:57

但是，從技術上講，如果您有固定的文本大小，您可以使用定位（相對）來移動較大的文本並將行高設置爲較小的文本（我假定這個較大的文本是因此您可以使用它作爲CSS選擇器）

來源

2010-10-22 14:53:30 Alex

你所看到的功能是正確的，因爲默認的「垂直對齊「是基準。看起來你想要vertical-align:top。還有其他選項。請參閱W3Schools。

編輯 W3Schools還沒有清理他們的行爲，仍然表現爲一種粗製濫造（最好）的信息來源。我現在使用sitepoint。滾動至站點首頁的底部以訪問其參考部分。

來源

2010-10-22 14:58:44 DwB

+10

我已經瞭解到W3Schools不是一個很好的參考站點。有關更多信息，請參閱http://w3fools.com/。 – DwB 2013-01-21 17:06:23

+1得出結論：W3S是一件垃圾。 – aefxx 2014-02-07 08:18:38

一個選項是使用一個表，其中不同大小的文本在他們自己的單元格中，並在每個單元格上使用align：middle。

它不漂亮，不適用於所有場合，但它很簡單，適用於任何文本大小。

來源

2010-10-22 14:59:00

我寧願在再次使用表格進行佈局之前接受失敗。 – 2010-10-22 15:00:35

兩個組文本必須具有相同的固定線路，高度和垂直對齊的設定

span{ 
    vertical-align: bottom; 
    line-height: 50px; 
}

來源

2017-09-05 08:36:57 Matoeil

這工作

header > span { 
 
    margin: 0px 12px 0px 12px; 
 
    vertical-align:middle; 
 
} 
 
.responsive-title{ 
 
    font-size: 12vmin; 
 
    line-height: 1em; 
 
} 
 
.responsive-subtitle{ 
 
    font-size: 6vmin; 
 
    line-height: 2em; 
 
}

<header> 
 
    <span class="responsive-title">Foo</span> 
 
    <span class="responsive-subtitle">Bar</span> 
 
</header>

來源

2018-02-05 19:24:01

如何垂直對齊2種不同大小的文本？

回答

相關問題