与表格单元格垂直对齐不起作用

Question

我试图将 header 元素置于其父元素的中心，但由于某种原因，display:table-cell 方法似乎不起作用。我正在使用 Basscss 作为 CSS 框架，不确定这是否与它有关...

body, html {
  height: 100%;
}

.hero {
  display: table;
  width: 100%;
  height: 90%;

  header {
    display: table-cell;
    vertical-align: middle;
  }
}

我设置了 CodePen over here。出于某种原因，header 不会垂直居中。

感谢任何帮助。提前致谢！

Answer 1

因为你的<header>需要他的直接父元素带一个display: table。

在您的 CodePen 中，.clearfix 和 .container 在 <header> 之上。 .sm-col 还有一个 float:left; 属性

查看我编辑的 CodePen

Answer 2

如果您想让整个 header 标签居中，请尝试使用此代码，

<header class="sm-col sm-col-12 center">

我所做的只是将 class 中心添加到您的 header 标签中，该标签已经包含 sm-col 和 sm-col-12。

希望对您有所帮助。

谢谢

与表格单元格垂直对齐不起作用

Vertical Align with table-cell Not Working

html

css

vertical-alignment