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>

（如果你想知道什么是不透明度0和转换在box-id中，那就是动画只是在向下滚动时显示图像）

当然，文本也有一些风格，但我不认为这对问题很重要，因为它只是颜色，字体系列等。

正如您所看到的，我添加了一个div，以便使图像居中而不将其转换为块元素。但是，如果我向第一个p元素添加float并向右浮动到第二个p元素，它们不会在文本旁边对齐，而是在它下面。

有没有人知道如何在窗口中间对齐图像，第一个文本元素留给它，第二个文本元素对齐它？（我知道我可以将文本元素的margin-top设置为减去任何东西，但这对于响应性来说并不那么好）

Answer 1

我不确定这是你要求的，但仍然有一个名为display的{{1}}属性，你可以使用它。

＆＃13;

flex

＆＃13;

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

＆＃13;

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>

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

2 个答案: