横幅中的中心文字,没有多余的div

时间:2018-10-21 01:19:35

标签: css css3 flexbox centering

我想创建一个全角横幅,并将其与flex的对齐内容和最大宽度结合起来,以避免使用额外的div。 我不确定是否有可能。但是我想避免我的第一个直觉,就是添加包装器div并把它命名为day。我觉得应该有更好的方法。

<div class="banner-wrapper">
    <div class="banner-content">
      <p>read all our policies</p>
      <p><a href="">examine our license agreement</a></p>
    </div>
</div>



    .banner-wrapper {
      display: flex;
      justify-content: center;
      background-color: black;

      .banner-content {
       //base
       color: white;     //not relevant
       font-size: 12px;  //not relevant

       //layout
       width: 100%;
       max-width: 1200px;
       display: flex;
       justify-content: space-between;
       padding:9px 15px;  //not relevant
     }
   }

参考图片:text banner with full width background but max-width'ed text

我正在使用sass,我想做的是

    <div class="banner-wrapper">
      <p>read all our policies</p>
      <p><a href="">examine our license agreement</a></p>
    </div>

我找不到使用flex或grid的方法。 这段la脚的伪ish代码就是我正在尝试的方向:

.banner-wrapper {
 display: flex; 
 justify-content: center;
 background-color: black;
 padding:9px auto;  //use padding similar to margin : 0 auto;
}

0 个答案:

没有答案