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。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

可以通过bootstrap来完成：

https://jsfiddle.net/896agnnx/

<div class="row">
    <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 left"><img class="img-responsive" src="http://wmad.cs.vt.edu/images/code_background.png" alt="WNFS Image" /></div>
    <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 right"><img class="img-responsive" src="http://www.edgesolutions.in/wp-content/uploads/apps-development.jpg" alt="WNFS Image" /></div>
  </div><!-- close divWnfsHeader --> 

.left{
  margin:0;
  padding:0;
}

.right{
  margin:0;
  padding:0;
}

用同一行中的imgs来查看`h1`内容的

2 个答案: