垂直<hr>向下推动<h2> [重复]

第一次在这里发布。 我正在尝试在两个标题标签之间获得2条垂直线,但是它一直将标题向下推...反正我可以解决这个问题吗? 我尝试使用“ align-content:fex-start”和“ padding-top:10px”。

visual example of problem

HTML和CSS

   <hr class="vertical-hr">
   <h2 class="inline-h">200+<br />Pack<br />Downloads</h2>
   <hr class="vertical-hr">
   <h2 class="inline-h">7<br />Content<br />Packs</h2>

(CSS)

   .inline-h {
   display: inline-block;
   width: auto;
   padding: 5px;
   }
   .vertical-hr {
   display: inline-block;
   height: 125px;
   }
评论
  • LT_A
    LT_A 回复

    Flexbox可以轻松完成您想做的事情。我在这里使用内联样式来缩短代码。

      <div style="display:flex; max-width:16rem">
      <hr class="vertical-hr">
       <h2 class="inline-h">200+<br />Pack<br />Downloads</h2>
       <hr class="vertical-hr">
       <h2 class="inline-h">7<br />Content<br />Packs</h2>
       </div>
  • shift
    shift 回复
    .inline-h {
      width: auto;
      padding: 5px;
      float: left;
      margin: 15px 10px;
    }
    
    .vertical-hr {
      height: 125px;
      float: left;
    }
    <hr class="vertical-hr">
    <h2 class="inline-h">200+<br />Pack<br />Downloads</h2>
    <hr class="vertical-hr">
    <h2 class="inline-h">7<br />Content<br />Packs</h2>
  • nerror
    nerror 回复

    我认为您可以使您的生活更轻松一些,并使用Flexbox很好地对齐所有内容,请查看下面的代码。

    .inline-h {
      width: auto;
      padding: 5px;
    }
    
    .vertical-hr {
      height: 125px;
    }
    
    div {
      display: inline-flex;
      align-items: center;
    }
    <div>
      <hr class="vertical-hr">
      <h2 class="inline-h">200+<br />Pack<br />Downloads</h2>
      <hr class="vertical-hr">
      <h2 class="inline-h">7<br />Content<br />Packs</h2>```
    </div>