在网页屏幕上居中三个图标

Question

我正在尝试为网页实现以下元素配置：

[左图标图像]＆lt; -padding-＆gt; [水平居中图标图像]＆lt; -padding-＆gt; [右图标图像]

每个图标下面都有一些文本，它相对于它自己的中心居中。使用HTML和CSS实现这一目标的最佳方法是什么？

Answer 1

你没有发布任何代码，所以通常情况下我没有帮助，但由于这并不是那么难，并且有很多方法，我会告诉你一个。

HTML：

<div id="con">
    <div>
        <img src="http://www.psdgraphics.com/wp-content/uploads/2009/08/danger-icon.jpg" /> 
        <span>Text under the first one</span>

    </div>
    <div>
        <img src="http://www.psdgraphics.com/wp-content/uploads/2009/08/danger-icon.jpg" /> 
        <span>Test under the second</span>

    </div>
    <div>
        <img src="http://www.psdgraphics.com/wp-content/uploads/2009/08/danger-icon.jpg" /> 
        <span>And third</span>

    </div>
</div>

CSS：

#con {
    width: 600px;
    height: 200px;
    margin: 0 auto;
}
#con div {
    width: 200px;
    height: 200px;
    float: left;
    text-align: center;
}
#con div img {
    width: 200px;
}

所以在这里我们创建3个“盒子”，其中包含每个带有文本的图像。我们设置了width和height，然后使用float。现在我们需要将它们放在一个容器中，这样我们就可以使用margin: 0 auto;来对它们进行集中。

从那里，它只是在框中获得您想要的图像，并在其下键入您的文本。我放了一个span所以你可以看到它更好一点+你可以使用span来设置它。

DEMO HERE

---

这是一个围着每个margin的人，所以他们互相推开。不想在元素内部使用填充（我想你可以，但边缘会更好）。

CSS：

#con {
    width: 660px;
    height: 200px;
    margin: 0 auto;
}
#con div {
    width: 200px;
    height: 200px;
    float: left;
    text-align: center;
    margin: 0 10px;
}

我们向margin添加了#con div，然后必须更改#con宽度以考虑由边距引起的新添加的60px。

DEMO HERE