图标和文本在下一行。

I have some icons with text like as shown below

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

Working JSFiddle

工作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>

Can anyone please tell me how to make the icon and text in two rows like as shown below without using any specified width or height

请问有谁能告诉我如何让图标和文字在两行，如下图所示，不使用任何指定的宽度或高度?

3 个解决方案

#1

Adding display: block; to your span would do it.

添加显示:块;到你的空间去做它。

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

Fiddle Demo

#2

Use block and inline block display properties

使用块和内联块显示属性。

inline block for the containers and block for the children

为孩子的容器和块的内联块。

Demo

演示

#3

Jsfiddle

Jsfiddle

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

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

.m-sm span { display: block; }