對齊堆疊的div使底部div與相鄰div中的文字排成一行

我對HTML/CSS比較新，我對如何對齊垂直堆疊的div有疑問。我做了一些搜索，找不到其他人問這個相同的問題。對齊堆疊的div使底部div與相鄰div中的文字排成一行

<!DOCTYPE html> 
<html> 
<head> 
<meta name="description" content="Stacking question." /> 
    <meta charset="utf-8"> 
    <title>JS Bin</title> 
<style type="text/css"> 
    div.line { 
     display: inline-block; 
     font-size: 54px; 
    } 
    div.stacked { 
     display: inline-block; 
    } 
</style> 
</head> 
<body> 
<div class='container'> 
    <div class='line'> 
    The cat ran 
    </div> 
    <div class='stacked'> 
    <div class='element'> 
     under 
    </div> 
     <div class='element'> 
     the 
    </div> 
    </div> 
    <div class='line'> 
    table. 
    </div> 
</div> 
</body> 
</html>

你在這裏看到的是一行文字，我把這些文字放在幾個div中。請注意，這可能看起來很奇怪，但這恰恰是我想要排列的方式：如果我的查詢的最終答案是「不 - 你不能這樣做」我仍然很開心，因爲我只是想學習如何這東西的作品。

在中間，我堆放了包含單詞「下」和「the」的div。我想知道的是：是否有一種方法可以對齊堆疊的div，以便將包含「under」一詞的div的基線與包含「ran」和「table？」的div的基線對齊。

來源

2014-05-22 Joshua Gevirtz

.stacked {垂直對齊：中部;}這將它對準到另外兩個文本的基線 – mohamedrias

.stacked { 
display: inline-block; 
vertical-align : middle; 
}

這將使堆疊div對齊到其他兩個div的基線。

enter image description here

來源

2014-05-22 03:25:04 mohamedrias

對齊堆疊的div使底部div與相鄰div中的文字排成一行

回答

相關問題