对齐单个容器和 double-line 个容器

Question

我有一个 header 行，其中一些 header 名称太长，无法放在一行中，必须拆分。 headers 是固定高度，足够两行。文本应垂直居中。

类似于：

.container {
  width: 100%;
  height: 40px;
}
.pill {
  display: inline-block;
  width: 33%;
  background-color: red;
  text-align: center;
  height: 40px;
}

<div class="container">
  <div class="pill">
    Header One
  </div>
  <div class="pill split">
    Header
    <br/>Two
  </div>
  <div class="pill">
    Header Three
  </div>
</div>

我不知道如何正确对齐所有这些 header。将 line-height 设置为 40px 使第二个 header double-height；将高度设置为 40px 会使它们不对齐。

谢谢！

Answer 1

将以下内容添加到您的 .pill css：

vertical-align:middle;

Here is an example

Answer 2

这就是我在您的代码中所做的更改：

添加vertical-align: middle对齐pills
使用 not 选择器为除 split 之外的 pill 提供与高度相同的 line-height：
```
.pill:not(.split) {
  line-height: 40px;
}
```
在较小的显示器中，菜单会换行 - 因此也请使用 float 和 clear。

让我知道您对此的看法，谢谢！

.container {
  width: 100%;
  height: 40px;
}
.pill {
  display: inline-block;
  vertical-align: middle;
  float: left;
  width: 33%;
  background-color: red;
  text-align: center;
  height: 40px;
}
.pill:not(.split) {
  line-height: 40px;
}
.pill:after{
  content: '';
  display: block;
  clear: both;
}

<div class="container">
  <div class="pill">
    Header One
  </div>
  <div class="pill split">
    Header
    <br/>Two
  </div>
  <div class="pill">
    Header Three
  </div>
</div>

Answer 3

Flexbox 可以做到这一点：

.container {
  width: 100%;
  height: 40px;
  display: flex;
}
.pill {
  display: flex;
  flex: 0 0 30%;
  margin: 0 1%;
  justify-content: center;
  align-items: center;
  text-align: center;
  background-color: red;
  height: 40px;
}

<div class="container">
  <div class="pill">
    Header One
  </div>
  <div class="pill split">
    LONG HEADER TEXT GOES HERE
  </div>
  <div class="pill">
    Header Three
  </div>
</div>

Answer 4

一个选项是更改并排设置元素的方式，因此 inline-block:

Table-细胞

.container {
  width: 100%;
  height: 40px;
}
.pill {
  padding:10px;
  border:1px solid white;
  display: table-cell;
  width: 33%;
  background-color: red;
  text-align: center;
  height: 40px;
  vertical-align:middle;
}

<div class="container">
  <div class="pill">
    Header One
  </div>
  <div class="pill">
    Header
    <br/>Two
  </div>
  <div class="pill">
    Header Three
  </div>
</div>

对齐单个容器和 double-line 个容器

Align single and double-line containers

html

css

css-selectors

css-float

Table-细胞