垂直对齐忽略 CSS3 最小高度属性 : middle

Question

http://codepen.io/maxwbailey/pen/nxaFr

我试图让文本垂直居中。这仅在存在空白时才重要(即当自动高度小于最小高度时)。我怎样才能做到这一点？我已经多次看到这个问题被问到，但我找到的答案都不适用于我的申请。

谢谢! ^_^

Answer 1

考虑到您已将最小高度设置为 75 像素，您只需将其一半的内边距添加到文本的顶部和底部，如下所示:

.warning {
  display:block;
  font-family: sans-serif;
  font-weight: bold;
  padding: 32.5px 0;
  /*vertical-align: middle;*/
}

.warning 需要 display: block; 才能接受填充，但我认为这些是实现您的目标所必需的唯一更改。查看:http://codepen.io/maxwbailey/pen/qcvre

编辑

如果你想保持文本居中直到容器变得足够小以填充最小高度，你需要使用display: table-cell，像这样:

.warning {
  display:table-cell;
  font-family: sans-serif;
  font-weight: bold;
  vertical-align: middle;
  height: 75px;
}

http://codepen.io/maxwbailey/pen/dwfar