html - 用 flexbox 和 :after 定位元素

Question

在我工作的网站上，我在页面顶部有一个 300 像素高的横幅，其中包含页面标题和下划线。

这是标记

<div class="container">
  <div id="banner">
        <div class="jumbotron">
            <div class="container">
                <h1>Terms and conditions</h1>
                <img class="center-block" src="assets/img/common/header-blue-underline.png" width="158" height="10" alt=""/> 
            </div>    
        </div>
    </div>

    <div id="banner-nav">
        <ul class="get-in-touch-links">
            <li><a href="/">Home</a></li>
        </ul>
    </div> 
</div>

这是什么(带有样式)

为了实现这一点，我使用边距来强制间距，当标题变长时，这不太容易维护。

我宁愿使用 flexbox 来对齐横幅内的文本，这样无论内容有多少，文本都将保持垂直居中。

例如，我可以将这样的类应用于#banner

.flex{
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

问题是:使用此方法时，图像不会自然地 float 在文本下方。

所以我尝试了:

<div class="container">
  <div id="banner" class="flex">

      <h1>Nulla quis lo</h1>



    </div>

    <div id="banner-nav">
        <ul class="get-in-touch-links">
            <li><a href="/">Home</a></li>
        </ul>
    </div> 
</div>

#banner h1:after{
            content: url(assets/img/common/header-blue-underline.png);
        }

因此下划线会自动放置在 h1 下方，但它恰好位于 h1 元素旁边。

从本质上讲，我正在努力停止对事物的纠缠，并使用现代标准来准确定位事物。

Answer 1

由于伪元素的默认显示是 inline，您的 ::after 将与文本并排排列。

你可以把它做成一个 block ，给它一个宽度，然后使用自动边距让它居中

#banner h1::after {
        content: url(assets/img/common/header-blue-underline.png);
        display: block;
        width: 40%;
        margin: 0 auto; 
    }

或者更简单，让你的 h1 成为一个 flex 容器，它会将 ::after 推到它自己的行

#banner h1{
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }

#banner h1:after{
        content: url(assets/img/common/header-blue-underline.png);
    }

---

可能的升级是使用伪作为一行，以避免加载图像。

.flex{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

h1 {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

h1::after {
  content: '';
  width: 40%;
  height: 6px;
  margin-top: 15px;
  background: lightblue;
}

<div class='flex'>
  <h1> A header with a blue line </h1>
</div>