边距：auto 无法正常工作

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

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

Answer 2

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

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

解决方法：你最好在.iconimages

中加上这个

display: block;

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

边距：auto 无法正常工作

Margin: auto Not Working Properly

html

css

margin