Question

这是我的HTML。我试图有三个浮动div与中心图像和描述

<div class=icons>
                    <div class=iconslist><img class=iconimages src="gas.png"><div class=iconlabels>The EPA Estimates <b>10%</b> of air pollution comes from lawn care</div></div>
                    <div class=iconslist><img class=iconimages src="stack.png"><div class=iconlabels>Over <b>800,000,000 gallons</b> of gasoline are used per year on lawn care</div></div>
                    <div class=iconslist><img class=iconimages src="noise.png"><div class=iconlabels>Gasoline mowers are <b>400%</b> louder than electric mowers</div></div>
            </div>

这是我的CSS

.icons {
width: 606px;
height: 200px;
margin: 0 auto;
}
.iconslist {
height: 200px;
width: 200px;
float: left;
background-color: white;
}
.iconimages {
height: 70px;
width: 70px;
margin: 0 auto;
text-align: center;
}
.iconlabels {
width: 180px; 
margin: 0 auto;
margin-top: 20px;
text-align: center;
}

出于某种原因，我无法将图像置于中心位置。文本以完全相同的代码为中心，因此我不知道问题所在。

Answer 1

W3C中text-align的定义：
text-align属性指定元素中 text 的水平对齐方式。

所以你应该将text-align放在父css中，.iconslist在这种情况下可能会有效。

解决方案：您最好在.iconimages

中添加此内容

display: block;

说明：您已经知道设置内容水平中心正在使用margin: 0 auto;，它现在正在运行，因为img是一个内联元素。显示内联内容，之前或之后没有换行符。

Answer 2

将text-align:center;添加到您的.iconslist CSS。

保证金：自动无法正常工作

2 个答案: