html - 在网页屏幕上居中放置三个图标

Question

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

[左图标图像]<-padding->[水平居中图标图像]<-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 来设置它的样式。

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;
}

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

DEMO HERE