Question

在我正在处理的网站上，我在页面顶部有一个300px高的横幅，其中包含页面标题和下划线。

这是标记

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

问题是：使用此方法时，图像在文本下不会自然浮动。

所以我试过了：

<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会与文字并排排列。

您可以将其设为块，为其指定宽度并使用自动边距使其居中

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

或者更简单，让你的h1成为一个灵活容器，它会将::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>

Answer 2

如果主容器有flex并使用height分派其子容器，您也可以使用主容器中的margin（渐变也可用于部分强调标题）

.flex {
  color: rgb(253, 253, 254);
  display: flex;
  flex-direction: column;
  height: 250px;/* can be any heights and units */
  background: 
       linear-gradient(to left, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7))/* gradient used here to darken the bg image , demo purpose */,
       url(http://lorempixel.com/800/200/technics/6) center / cover;
}

#banner {
  margin: auto;/* center in the container and push others to the the edges */
}

#banner h1 {
  background: linear-gradient(to left, rgba(18, 153, 221, 0.9), rgba(18, 153, 221, 0.9)) no-repeat bottom center / 90px 5px;
  padding-bottom: 1em;
}

#banner-nav {
  background: rgba(18, 153, 221, 0.8);
}


/* quick bad reset*/

ul,
li,
a {
  color: inherit;
  list-style-type: none;
  display: flex;
  margin: 0 1em;
  padding: 0.25em;
}

<div class="container flex">
  <div id="banner">
    <h1>Nulla quis lotest</h1>
  </div>
  <div id="banner-nav">
    <ul class="get-in-touch-links">
      <li><a href="/">Home</a></li>
    </ul>
  </div>
</div>

codepen demo to play with

使用flexbox定位元素和：

2 个答案: