下一行的图标和文本答案

【问题标题】：icon and text in next line下一行的图标和文本
【发布时间】：2016-11-04 10:00:41
【问题描述】：

我有一些带有如下文字的图标

<span class="text-center  m-sm">
  <span class="fa fa-circle fa-1x"></span>
  <span class="font-bold no-margins">
    testdevice 1
  </span>
</span>

<span class="text-center  m-sm">
  <span class="fa fa-circle fa-1x"></span>
  <span class="font-bold no-margins">
    testdevice 2
  </span>
</span>

<span class="text-center  m-sm">
  <span class="fa fa-circle fa-1x"></span>
  <span class="font-bold no-margins">
    testdevice 3
  </span>
</span>

谁能告诉我如何在不使用任何指定宽度或高度的情况下将图标和文本分成两行，如下所示

【问题讨论】：

标签： html css icons font-awesome

【解决方案1】：

将display: block; 添加到您的span 即可。

.text-center{
   text-align: center;
   display: inline-block;
   margin: 0 5%;
}
span{
   display: block;
}

Fiddle Demo

【讨论】：

【解决方案2】：

使用block 和inline block 显示属性

容器的内联块和子级的块

Demo

【讨论】：

【解决方案3】：

Jsfiddle

.text-center{
  text-align:center;
}

.m-sm {
  display: inline-block;  
}

.m-sm span { display: block; }

【讨论】：