我似乎无法让它工作并且为此花费了太多时间。我假设它应该很简单。我正在寻找在某些文本上方放置图像并使它们水平居中,但也使它们在中间垂直居中的理想效果。
如有任何帮助,我们将不胜感激!
最佳答案
@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>
关于Col 中的 CSS 垂直对齐对象,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46205580/