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

像这样？

我认为您需要::after以及css中的一些内容

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

Answer 2

因此，元素不会垂直对齐的原因是我试图让顶部边框垂直对齐，但显示：table / table-cell将使：after元素与此相同的高度，从而将边框置于两个元素的顶部。我试图使用表格/表格单元格作为响应的原因，因此这两个元素不会相交，但是因为我永远不会得到：在元素的边界之后，在在中间，我只需要提出另一种响应性解决方案。

CSS竖直对齐：在元素

2 个答案: