图标和下一行的文字

Question

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

Working JSFiddle

$fb = new \Facebook\Facebook([
  'app_id'                => $appId,
  'app_secret'            => $appSecret,
  'default_graph_version' => $graph_api_version,
]);

$helper = $fb->getRedirectLoginHelper();
$accessToken = $helper->getAccessToken();

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

Answer 1

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

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

Fiddle Demo

Answer 2

使用block和inline block显示属性

容器的内联块和子容器块

Demo

Answer 3

Jsfiddle

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

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

.m-sm span { display: block; }