css - CSS3 min-height 属性被垂直对齐忽略：中间

Question

我试图让文本垂直居中。这仅在有空白时才重要（即当自动高度小于最小高度时）。我怎样才能做到这一点？我已经多次看到这个问题被问到，但我还没有找到适用于我的应用程序的答案。

谢谢！^_^

score 0 · Accepted Answer

鉴于您已将最小高度设置为 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;
}

1 回答 1