我有一些带有文本的图标,如下所示
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>
任何人都可以告诉我如何在不使用任何指定宽度或高度的情况下将图标和文本分成两行,如下所示
最佳答案
将display: block;
添加到span
即可。
.text-center{
text-align: center;
display: inline-block;
margin: 0 5%;
}
span{
display: block;
}
Fiddle Demo