css用同一行上的imgs来表示`h1`内容

Question

我试图h1内嵌标签内联两个相同图像的实例,水平居中在页面的两侧.我有以下html:

<div id="divWnfsHeader">
    <hr>
    <div id="divH1ImgLeft"><img src="../images/transBg.png" alt="WNFS Image" /></div>
    <div id="divH1"--><h1>WNFS</h1></div>
    <div id="divH1ImgRight"><img src="../images/transBg.png" alt="WNFS Image" /></div>
  </div><!-- close divWnfsHeader -->

这是我最近尝试过的CSS:

#divH1 {
  display: inline;
  /*
  overflow: hidden;
  */
}

#divH1ImgLeft {
  display: inline;
  float: left;
  /*
  overflow: hidden;
  */
}

#divH1ImgRight {
  display: inline;
  float: right;
  /*
  overflow: hidden;
  */
}

#divWnfsHeader {
  text-align: center;
}

但当然它不起作用,否则我不会发帖寻求帮助.我最后得到左图像,缩进,然后是一个大的间隙,然后是H1内联的内容,最后是下一行的同一图像的第二个实例,但也许它实际上在同一行但是包裹？

在针对上面详述的不同div尝试不同css参数的多个变化后,我仍然没有进一步.请问css知道的人请伸出援助之手帮助我的css吗？

Answer 1

执行此操作的简单方法是在父级上使用display: flex，并且hr您可以使用flex: 0 0 100%，但在父级上您应该设置flex-wrap: wrap。

#divWnfsHeader {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}
hr {
  flex: 0 0 100%;
}

<div id="divWnfsHeader">
  <hr>
  <div id="divH1ImgLeft"><img src="../images/transBg.png" alt="WNFS Image" /></div>
  <div id="divH1"--><h1>WNFS</h1></div>
  <div id="divH1ImgRight"><img src="../images/transBg.png" alt="WNFS Image" /></div>
</div><!-- close divWnfsHeader -->