html - 无法水平对齐我的图像？

Question

我在垂直对齐我的图像/文本时遇到问题，他们似乎只是忽略了代码并按照他们的意愿行事。

有谁知道我是否遗漏了什么？因为我似乎无法弄清楚。请检查此处的图像以了解我得到/想要实现的目标:https://imgur.com/a/NfZGQ

我在网上看过，但教程不是很好，也不能真正实现我想要实现的目标。感谢您的帮助，谢谢。 :)

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;
}

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

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