Col 中的 CSS 垂直对齐对象

Question

我似乎无法让它工作并且为此花费了太多时间。我假设它应该很简单。我正在寻找在某些文本上方放置图像并使它们水平居中，但也使它们在中间垂直居中的理想效果。

如有任何帮助，我们将不胜感激!

A = a row, B = a column, C = an image, D =

of text

Answer 1

@TO15108，这可以使用 flexbox 来完成。要创建一个，请将 display 属性值设置为 flex。

从那里，您可以利用 justify-content 和 align-items 属性来获得您想要实现的垂直和水平居中。

我提供了一个代码片段供您查看其工作原理。确保将其展开到完整大小。

.d-flex {
    display: flex;
    height: 100vh;
    justify-content: center;
    align-items: center;
}


.col {
    flex: 0 0;
    max-width: 50%;
    padding: 0px;
    margin-right: 5px;
    text-align: center;
}

<div class="d-flex">
    <div class="col">
        <img src="http://via.placeholder.com/350x150">
        <div>some text</div>
    </div>
    <div class="col">
        <img src="http://via.placeholder.com/350x150">
        <div>some text</div>
    </div>
</div>