将中间的图像与其旁边的文本对齐

Question

我只是在第一个网站上工作。 这是有关Halo的onepager，它只是花一点时间学习HTML，CSS和Javascript。 我想创建一个部分，列出游戏的所有框，并在其旁边添加一些文字。 我在一张照片中有两个盒子。 那就是我现在得到的：

  #historyBackground { background: url(../images/uff.jpg); background-size: cover; background-position: 50% 50%; background-repeat: none; position: absolute; } #halo-1-2-box { height: 50%; width: 30%; opacity: 0; transition: all ease .5s; } #centerImage { vertical-align: middle; text-align:center; } 

  <section id="historyBackground"> <div id="centerImage"> <img src="images/history/halo1&2_box.png" alt="Halo Combat Evolved and Halo 2 Box" id="halo-1-2-box"> <p id="halo-1">Insert Lorem Ipsum here</p> <p id="halo-2">Insert Lorem Ipsum here</p> </div> </section> 

（如果您想知道box-id中的不透明度0和过渡效果是什么，那是为了让动画在向下滚动时仅显示图像）

当然文本也有一些样式，但是我认为这个问题并不重要，因为它只是颜色，字体系列等。

如您所见，我添加了一个div以使图像居中，而无需将其转换为块元素。 但是，如果我在第一个p元素的左侧添加浮点数，在第二个p元素的右侧添加浮点数，则它们不在文本旁边，而是在文本下方对齐。

有谁知道如何在窗口中间，图像的第一个文本元素和图像的第二个元素之间对齐图像？ （我知道我可以将文本元素的页边距设置为减去任何值，但这对于响应能力不是很好）

Answer 1

我不确定这是您要的内容，但是仍然有一个名为flex的display属性，您可以使用它。

 #centerImage { display: flex; align-items: center; } 

 <section id="historyBackground"> <div id="centerImage"> <p id="halo-1">Insert Lorem Ipsum here</p> <img src="http://www.haloforever.com/images/halo_3_dlc_legendary_small.gif" alt="Halo Combat Evolved and Halo 2 Box" id="halo-1-2-box"> <p id="halo-2">Insert Lorem Ipsum here</p> </div> </section> 

Answer 2

我希望这可行：

<section id="historyBackground">
<div id="centerImage">
<p id="halo-1">Insert Lorem Ipsum here</p>
<center>
     <img src="images/history/halo1&2_box.png" alt="Halo Combat Evolved and Halo 2 Box" id="halo-1-2-box">
</center>
<p id="halo-2">Insert Lorem Ipsum here</p> </div>
</section>