对齐堆叠的div,使底部div与相邻div中的文本对齐

时间:2014-05-22 02:46:46

标签: html css

我对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>

1 个答案:

答案 0 :(得分:1)

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

这将使堆叠的div与其他两个div的基线对齐。

enter image description here