Question

这是我想要创建的布局

本质上：

Word total和数字120应在中心垂直对齐
单词per month应该位于底部w.r.t number 120
单词组120和per month应该右对齐（因此在css类＆＃39; incident-container＆＃39;）中使用float:right

我从这个css样式display:table-cell开始。它解决了第3点。但是没有实现第1点。垂直对齐不起作用。

演示代码可以在jsfiddle：http://jsfiddle.net/kongakong/151eprrk/

看起来像这样：

根据SO答案（Vertically centering a div inside another div），我可以使用flex来实现中心对齐。

这是我的下一次尝试：http://jsfiddle.net/kongakong/151eprrk/4/

但它仍然无法正常工作：

有人可以指出错误或遗失的内容吗？

Answer 1

你走在正确的轨道上。只需要一些修复。

内部div上不需要table-cell。 inline-block会这样做。
使用表格布局时无需float。
从.frequency删除宽度。
您正在寻找vertical-align: baseline而不是bottom。

更新小提琴：http://jsfiddle.net/abhitalks/151eprrk/5/

<强>段：

.incident-banner {
    display: inline-table;
    color: white; background: lightblue;
    margin-top: 20px; width: 100%; height: 75px;
}
.text { display: table-cell; vertical-align: middle; padding: 10px 20px; }
.incident-container {
    display: table-cell; vertical-align: middle; text-align: right;
    padding: 10px 20px;
}
.incident { display: inline-block; vertical-align: baseline; font-size: 40px; } 
.frequency {
    display: inline-block; vertical-align: baseline;
    font-size: 12px;
}

<div class="incident-banner">
    <div class="text">Total</div>
    <div class="incident-container">
        <div class="incident">120</div>
        <div class="frequency">per month</div>
    </div>
</div>

Answer 2

请针对您的问题试用此代码 -

JSbin Demo

* {
  margin: 0;
  padding: 0;
}
.main {
  background: red;
  overflow: hidden;
  padding: 20px;
}
.left {
  float: left;
}
.right {
  float: right;
}
.left span {
  line-height: 40px;
}
.right strong {
  font-size: 32px;
}
.right span {
  font-size: 12px
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>

<body>

  <div class="main">
    <div class="left">
      <span>Total</span>
    </div>
    <div class="right">
      <strong>120</strong>
      <span>per month</span>
    </div>
  </div>

</body>

</html>

Answer 3

此处已修复Fiddle

我刚刚在line-height＆amp;上添加了.incident属性padding-top

上的.frequency财产

.incident-banner {
  display: inline-table;
  color: white;
  background: lightblue;
  margin-top: 20px;
  width: 100%;
  height: 75px;
}
.text {
  display: table-cell;
  vertical-align: middle;
  padding: 10px 20px;
}
.incident-container {
  // display: flex;
  display: table-cell;
  float: right;
  vertical-align: middle;
}
.incident {
  display: table-cell;
  // display: inline-block;
  // align-self: center;
  text-align: right;
  vertical-align: middle;
  font-size: 40px;
  line-height: 75px;
}
.frequency {
  display: table-cell;
  //align-self: center;
  width: 75px;
  padding-right: 10px;
  vertical-align: middle;
  font-size: 12px;
  padding-top: 10px;
}

<div class="incident-banner">
  <div class="text">Total</div>
  <div class="incident-container">
    <div class="incident">120</div>
    <div class="frequency">per month</div>
  </div>
</div>

带有基线文本组的垂直对齐文本

3 个答案: