Question

我在垂直对齐图片/文字时遇到问题，他们似乎只是忽略了代码并做了他们想要的事情。

有人知道我是否错过了什么？因为我似乎无法弄明白。请查看此处的图片，了解我的目标：https://imgur.com/a/NfZGQ

我已经在网上查了一下，但是这些教程并不是那么棒，并且不适合我想要实现的目标。任何帮助表示赞赏，谢谢。：）

＆＃13;

body {
    background: gray;
}

.content {
    display: inline;
}

.group-content {
    position: absolute;
    left: 50%;
    max-width: 960px;
}

.group-content h3 {
    font-weight: normal;
    font-size: 20px;
    color: white;
}

.group-content p {
    font-weight: lighter;
    font-size: 20px;
    color: white;
}

＆＃13;

<div class="group-content">
    <div class="content">
        <img src="images/arma.png">
        <h3>Arma 3: Exile Server</h3>
        <p>A project for improving the exile mod.</p>
    </div>

    <div class="content">
        <img src="images/soon.png">
        <h3>Reserved Space</h3>
        <p>Reserved space for future projects</p>
    </div>

    <div class="content">
        <img src="images/soon.png">
        <h3>Reserved Space</h3>
        <p>Reserved space for future projects</p>
    </div>
</div>

＆＃13;

Answer 1

无需使用绝对位置将元素移动到中心位置。只需使用text-align:center并将内容应用为inline-block元素并为其应用宽度，如下所示。

 .content {
   display: inline-block;
   width:30%;
   vertical-align:top;
   text-align:center;
 }

 .group-content {
   max-width: 960px;
   text-align:center;
 }

DEMO

无法水平对齐我的图像？

1 个答案: