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 class="sm-col sm-col-12 center">

我所做的只是将类中心添加到已经有sm-col和sm-col-12的标题标记中。

希望这有帮助。

由于

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

2 个答案: