在单行上的图标下显示文本

Question

我已将它们显示在一行上，但文字没有显示在图标下，而是显示在旁边。

如何在图标下显示文字？

这是我的HTML

<div class="top_categories">
    <div class="cat_icon">
        <i class="fa fa-coffee fa-4x"></i>
    </div>
    <div class="cat_text">
        Pottery & Ceramics
    </div>

    <div class="cat_icon">
        <i class="fa fa-hand-paper-o fa-4x"></i>
    </div>
    <div class="cat_text">
         Handcrafts
    </div>
</div>

这就是CSS

.top_categories {
    padding: 10px;
    display: block;
}
.cat_icon {
    color: black;
    display: inline-block;
    text-align: center;
}
.cat_text {
    color: black;
    display: inline-block;
    text-align: center;
}

Answer 1

将每个组包裹在div中，并设置样式float:left;padding:5px 10px; 请注意，填充只是让它们不会彼此紧贴

请注意，当您浮动div时，它会从HTML“flow”中删除 - 这意味着它现在在页面上占用零垂直空间。要解决这个问题，请将整个代码包装在另一个div中，并将其设置为overflow:_____（隐藏或自动）样式，以纪念：

<div id="wrapper" style="overflow:auto">
    //the other HTML from the example
</div>

Whups - 你已经有了这样一个名为.top_categories的包装div，所以我把它添加到了css中。

jsFiddle Demo

.top_categories {
    padding: 10px;
    display: block;
}
.cat_icon {
    color: black;
    display: block;
    text-align: center;
}
.cat_text {
    color: black;
    display: block;
    text-align: center;
}
.my-group{
  float:left;
  xxborder:1px solid red;
  padding:5px 10px;
}
.top_categories{overflow:hidden;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="top_categories">
  <div class="my-group">
    <div class="cat_icon">
        <i class="fa fa-coffee fa-4x"></i>
    </div>
    <div class="cat_text">
        Pottery & Ceramics
    </div>
  </div>

  <div class="my-group">
    <div class="cat_icon">
        <i class="fa fa-hand-paper-o fa-4x"></i>
    </div>
    <div class="cat_text">
         Handcrafts
    </div>
  </div>
</div>

Answer 2

将文字和图标放在包装中，并为这些元素添加display: inline-block

<div class="wrapper">
    <div class="cat_icon">
        <i class="fa fa-coffee fa-4x"></i>
    </div>
    <div class="cat_text">
        Pottery & Ceramics
    </div>
</div>



.wrapper {
     display: inline-block;
}

然后您可以从cat-icon和cat-text类中删除。

我把代码放在你的小提琴中：https://jsfiddle.net/hyx5hsa2/

Answer 3

您可以使用额外的<div>（显示：内联块）包装每个图标和文字，然后将图标和文字上的显示更改为“阻止＆＃39;