css水平對齊按鈕，圖標下方顯示文本

Question

我試圖將我的文本放在字體真棒圖標的下面，並且我想使兩個按鈕位於彼此等距的頁面上。當前，圖標正顯示在文本旁邊，而按鈕是一個接another而至。

<ul id="mylist">
  <li><a class="btn btn-warning btn-outline btn-lg sharp" href="http://google.com" target="_blank"> My text below icon <i class="fa fa-address-card fa-5x"></i></a>

</li>
  <li><a class="btn btn-info btn-lg sharp" href="http://www.google.com" target="_blank">My text below icon  <i class="fa fa-address-book fa-5x"></i></a></li>

</ul>  

這是我的CSS位：

ul#mylist li {
    display:inline;
}

Answer 1

您可以只display: block; 對於超贊字體的圖標：

 ul#mylist li { display:inline; text-align:center; margin: 0 10%; } ul#mylist li i { display: block; } ul#mylist li:first-child { margin-left: 0; } ul#mylist li:last-child { margin-right: 0; } 

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> <ul id="mylist" class="text-center"> <li><a class="btn btn-warning btn-outline btn-lg sharp" href="http://google.com" target="_blank"> <i class="fa fa-address-card fa-5x"></i>My text below icon</a> </li> <li><a class="btn btn-info btn-lg sharp" href="http://www.google.com" target="_blank"><i class="fa fa-address-book fa-5x"></i>My text below icon </a></li> </ul>