我有一些带有文本的图标,如下所示

Working JSFiddle

<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 - 下一行中的图标和文字-LMLPHP

最佳答案

display: block;添加到span即可。

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


Fiddle Demo

10-07 19:12
查看更多