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

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>