我正在制作一个网页,需要居中对齐 3 个 div 作为宣传内容,就像这样:
为了获得这种间距和对齐方式,我添加了不可见的图像,然后在移动设备上隐藏起来,这样它们就可以响应了,就像这样:
<div id="promocontent">
<img class="img-responsive" src="img/iconenope.png">
<img class="img-responsive hidden hide-on-med-and-down" src="img/iconehidden.png">
<img class="img-responsive" src="img/iconenope.png">
<img class="img-responsive hidden hide-on-med-and-down" src="img/iconehidden.png">
<img class="img-responsive" src="img/iconenope.png"><br><br>
</div>
CSS:
#promocontent {
display: flex; /* establish flex container */
flex-direction: row; /* default value; can be omitted */
flex-wrap: nowrap; /* default value; can be omitted */
justify-content: space-between; /* switched from default (flex-start, see below) */
padding: 5px;
}
现在,我需要在这些图像的中心底部添加文本,例如:
那么,我该怎么做(响应式工作)?对齐 2 行文本(可能是 1 行,但 2 行会更好)。
谢谢。
最佳答案
#promocontent {
display: flex;
justify-content: space-between;
padding: 5px;
}
#promocontent > div {
display: flex;
flex-direction: column;
align-items: center; /* horizontally center child elements */
text-align: center; /* horizontally center text on narrow screens;
see http://stackoverflow.com/q/39678610/3597276 */
}
<div id="promocontent">
<div>
<img class="img-responsive" src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt="">
<h2>header text</h2>
<span>text text text text text</span>
</div>
<div>
<img class="img-responsive" src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt="">
<h2>header text</h2>
<span>text text text text text</span>
</div>
<div>
<img class="img-responsive" src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt="">
<h2>header text</h2>
<span>text text text text text</span>
</div>
</div>
关于html - 在 flexbox 中将带有图像的文本居中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40115897/