将三个图标集中在屏幕上以获取网页

Question

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

[左图图像]＆lt; -padding-> [水平居中图像图像]＆lt; -padding-> [右图形图像]

每个图标下面都有一些文本，这些文本相对于自己的中心以什么是使用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。

演示此处

---

这是一个周围有margin的一个，因此他们彼此推开。不想使用填充物，因为这是元素内部的（我想您可以，但是保证金会更好）。

CSS：

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

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

演示此处