Question

我想将一些图标和一些文字放在一个漂亮的网格中，就像时尚一样。文本需要以第二个图标为中心。它必须看起来像这样。

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

有没有简单的方法来实现这个目标？

Answer 1

创建一个行div并给它100％宽度并向左浮动并在此div里面创建3 div作为col div并给每个33％并向左浮动并将你的图标放在这些div中..现在创建另一行宽100 ％float现在将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>

Answer 2

创建一个类来控制包含图标的每个区域的大小。作为一个例子，我刚刚使用了px，但如果你想要它有响应，那么我会建议你使用％。使用每个图标的支架，您可以轻松地在下面添加文本，这将保持良好的对齐。

示例代码段：

＆＃13;

.pull-left {
  float: left;
}
.icon-box {
  width: 100px;
  text-align: center;
}
.icon {
  width: 60px;
  height: 60px;
  border: 1px solid;
  margin: 0 auto;
  display: block;
}

＆＃13;

<div class="icon-box pull-left">
  <div class="icon">ICON</div>
</div>
<div class="icon-box pull-left">
  <div class="icon">ICON</div>
  <p>Text</p>
</div>
<div class="icon-box pull-left">
  <div class="icon">ICON</div>
</div>

＆＃13;

Answer 3

你可以很容易地做到这一点。您需要使用列表项＆amp;显示内联文本中心属性。如下面的代码 -

HTML部分

<div id="test1">
<ul>
 <li>
  <img src="" alt="num1">

 </li>
 <li>
 <img src="" alt="num2">
 <br/>
 121
</li>
<li><img src="" alt="num3"></li>
</ul>
</div>

CSS for it

#test1 ul li {
display: inline;
list-style: none;
float: left;
padding: 0;
text-align:center; 
}

Answer 4

您是否听说过bootstrap 3？它有很多功能可以帮助您进行响应性对齐。

这方面的一个例子是：

<div class="row">
  <div class="col-md-4 text-center">
    <img src="my-picture.jpg" class="img-responsive" />
  </div>
  <div class="col-md-4 text-center">
    <img src="my-picture.jpg" class="img-responsive" />
  </div>
  <div class="col-md-4 text-center">
    <img src="my-picture.jpg" class="img-responsive" />
  </div>
</div>

Answer 5

我能想到的一种方法是创建3个容器（例如3个div），宽度为css属性（假设每个宽度为33％，或者如果需要添加边距则更小）（甚至可以使用px而不是％，但我推荐使用浮动左侧属性％。这些div将包含图标，然后你创建另外3个图标，这些图标将显示在图标下面。现在你只需将文本放在中心一个文本对齐中心就是这样。你给我们的信息很少，所以我无法帮助你。

这里有一个我的意思的例子，你只需要根据你的需要来实现它。

HTML：

<div class="container">
  <div class="icon"></div>
  <div class="icon"></div>
  <div class="icon"></div>
  <div class="text_empty"></div>
  <div class="text"></div>
<div class="text_empty"></div>

的CSS：

.container {width: 100%;}
.icon {width:33%; float: left; }
.text_empty {width:33%; float: left; }
.text {width:33%; float: left; text-align:center; }

HTML对齐文本和图标

5 个答案: