css 水平对齐按钮和图标下方的文本

Question

我正在尝试将我的文本放在字体真棒图标下方，我想让我的两个按钮居中在彼此等距的页面上。当前图标显示在文本旁边，并且按钮是一个接一个。

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