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

Question

我正在开发我的第一个网站。这是一个关于 Halo 的单页纸，只是为了搞点事情并学习 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 元素并向右浮动添加到第二个元素，它们不会在文本旁边对齐，而是在文本下方。

有谁知道如何对齐窗口中间的图像和左边的第一个文本元素和右边的第二个文本元素？ （我知道我可以将 text-elements 的 margin-top 设置为减去任何值，但这不利于响应）

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>