:after 元素上的 CSS 垂直对齐

Question

这是我正在使用的：

<div class="page-header">
    <h1>About Us</h1>
     ::after /* <-- This is just to illustrate where the :after is */
</div>

这是我的样式（它是 SCSS，如果您不习惯看到嵌套样式的话。）：

.page-header{
    display: table;
    width: 100%;
    vertical-align: middle;
    padding-right: 2em;

    h1{
      display: table-cell;
      min-width: 156px;
      vertical-align: middle;
    }

    &:after{
      display: table-cell;
      content: "";
      width: 86%;
      border-top: 3px solid #635c4d;
      vertical-align: middle;
    }
}

由于某种原因，我似乎无法让 :after 元素在中间垂直对齐。它只是停留在顶部。有任何想法吗？提前致谢。

Answer 1

所以元素不会垂直对齐的原因是我试图让顶部边框垂直对齐到 ，但是 display:table/table-cell 将使 :after 元素的高度与，从而将边框放在两个元素的顶部。出于响应原因，我试图使用表格/表格单元格，这样两个元素就不会相交，但是由于我永远不会让 :after 元素的边框在中间垂直对齐，所以我只是必须想出另一种响应能力的解决方案。

Answer 2

喜欢这样吗？

我认为你需要 ::after 和 css 中的一些内容

.page-header{
    display: table;
    width: 100%;
    vertical-align: middle;
    padding-right: 2em;
}
.page-header  h1{
    display: table-cell;
    min-width: 156px;
    vertical-align: middle;
}

.page-header::after{
    display: table-cell;
    content: "::after";
    width: 86%;
    border-top: 3px solid #635c4d;
    vertical-align: middle;
}

<div class="page-header">
    <h1>About Us</h1>
    <!-- This is just to illustrate where the :after is */ -->
</div>