CSS證明水平按鈕和文本下方的圖標

Question

我試圖把我的文字只是字體真棒圖標下面，我想使我的兩個按鈕是從每個other.currently圖標爲中心的距離相等的頁面上只顯示旁邊的文本和按鈕是此起彼伏。

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