HTML 对齐文本和图标

Question

我想像时尚一样将一些图标和一些文本对齐到漂亮的网格中。 文本需要在第二个图标下方居中。 它必须看起来像这样。

 ____     ____     ____
|    |   |    |   |    |
|ICON|   |ICON|   |ICON|
|____|   |____|   |____|
          TEXT

有什么简单的方法可以做到这一点吗？

Answer 1

创建一个行 div 并给它 100% 的宽度并向左浮动，在这个 div 内创建 3 个 div 作为一个 col div 并给每个 33% 并向左浮动并将你的图标放在这些 div 中..现在创建另一个行宽 100 % float left 现在将 p 标签放在其中并设置此 p 标签的样式 text-align:center 现在您将看到您的文本始终位于第二个图标 img 下方....

    <div style="width:100%;float:left;">

        <div style="width:33%;float:left;">
            <img src="your source" />
        </div>

        <div style="width:33%;float:left;">
            <img src="your source" />
        </div>    

        <div style="width:33%;float:left;">
            <img src="your source" />
        </div>

    </div>

    <div style="width:100%;float:left;">

        <p style="text-align:center;"> You Text Here..</p>

    </div>