我对HTML / CSS比较陌生,我对如何对齐垂直堆叠的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中。请注意,这可能看起来很奇怪,但这正是我想要div安排的方式:如果我的查询的最终答案是“不 - 你不能那样做”我仍然很高兴因为我只是想学习如何这些东西有效。
在中间,我堆叠了包含单词“under”和“the”的div。我想知道的是:有没有办法可以对齐堆叠的div,以便包含单词“under”的div的基线与包含“ran”和“table?”的div的基线对齐? / p>
答案 0 :(得分:1)
.stacked {
display: inline-block;
vertical-align : middle;
}
这将使堆叠的div与其他两个div的基线对齐。