我有三个 h1
标签,我想将它们与三个图像对齐。我怎样才能做到这一点?我希望文本在图像下方对齐,但我现在的代码有很多偏差。
.column {
max-width: 960px;
padding: 0 100px;
}
.container {
display: flex;
justify-content: center;
}
.column>h1 {
display: flex;
font-family: 'Montserrat-Bold';
font-size: 30px;
text-align: center;
}
<div class="container">
<div class="column">
<img src="https://cdn.pbrd.co/images/7rG6nw7kN.png" alt="design">
<h1>Design</h1>
</div>
<div class="column">
<img src="https://cdn.pbrd.co/images/7rG6nw7kN.png" alt="design">
<h1>Code</h1>
</div>
<div class="column">
<img src="https://cdn.pbrd.co/images/7rFbByg7Y.png" alt="design">
<h1>Collaborate</h1>
</div>
</div>
最佳答案
.column {
display: flex; /* new (1) */
flex-direction: column; /* new (2) */
align-items: center; /* new (3) */
max-width: 960px;
padding: 0 100px;
}
.container {
display: flex;
justify-content: center;
}
.column > h1 {
/* display: flex; <--- remove; not necessary */
font-family: 'Montserrat-Bold';
font-size: 30px;
text-align: center;
}
<div class="container">
<div class="column">
<img src="https://cdn.pbrd.co/images/7rG6nw7kN.png" alt="design">
<h1>Design</h1>
</div>
<div class="column">
<img src="https://cdn.pbrd.co/images/7rG6nw7kN.png" alt="design">
<h1>Code</h1>
</div>
<div class="column">
<img src="https://cdn.pbrd.co/images/7rFbByg7Y.png" alt="design">
<h1>Collaborate</h1>
</div>
</div>
注意事项:
- 将
img
和h1
元素的父元素设为 flex 容器。 - 垂直堆叠 flex 元素。
- 水平居中 flex 元素。
关于html - 如何让文字在图片下方居中?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43562894/