html - 在一行中显示图标下方的文本

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; 请注意，填充只是防止它们紧靠在一起

请注意，当您 float 一个 div 时，它会从 HTML“流”中移除——这意味着它现在在页面上占用的垂直空间为零。要解决此问题，请将整段代码包装在另一个 div 中，并将其设置为 overflow:_____(隐藏或自动)，comme ca:

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

糟糕 - 你已经有了这样一个包装 div，叫做 .top_categories，所以我把它添加到 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>