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>