我正在做一个网页,需要中心对齐3个格作宣传的内容,这样的:中心文字与图片Flexbox的
为了得到这个间距和对齐方式,我加隐形图像搞得那么隐藏在移动,所以他们得到响应,这样的:
<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会更好)。
谢谢。
有什么优势吗?像我的额外img有什么问题? – MucaP
没有什么,除了你迫使用户下载不必要的重量。我们希望尽可能少 - 这是设计的完美。你也可以尝试用''''''''来试验间距。 – ilrein
谢谢。顺便说一句,它的工作! – MucaP