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

克莱米纽斯

我只是在我的第一个网站上工作。这是一个关于 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 元素并向右浮动到第二个元素,则它们不会在文本旁边对齐,而是在文本下方对齐。

有谁知道如何将窗口中间的图像与左边的第一个文本元素和右边的第二个文本元素对齐?(我知道我可以将文本元素的边距顶部设置为减去任何值,但这对响应性并不是那么好)

杰弗里·苏吉特

我不确定这是否是您所要求的,但仍然有一个display名为属性flex,您可以使用它。

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

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章