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

您只需为{-1}}设置font-awesome图标：

＆＃13;

＆＃13;

display: block;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;