title: css justify button horizontally and text below icons
body: <p>I am trying to put my text just below the font awesome icon and i would like to make my two buttons be of centered on the page of equal distance from each other.currently the icon is showing just next to the text and the buttons are one after another . </p>
  
  <pre><code>&lt;ul id="mylist"&gt;
    &lt;li&gt;&lt;a class="btn btn-warning btn-outline btn-lg sharp" href="http://google.com" target="_blank"&gt; My text below icon &lt;i class="fa fa-address-card fa-5x"&gt;&lt;/i&gt;&lt;/a&gt;
  
  &lt;/li&gt;
    &lt;li&gt;&lt;a class="btn btn-info btn-lg sharp" href="http://www.google.com" target="_blank"&gt;My text below icon  &lt;i class="fa fa-address-book fa-5x"&gt;&lt;/i&gt;&lt;/a&gt;&lt;/li&gt;
  
  &lt;/ul&gt;  
  </code></pre>
  
  <p>and here is my css bit:</p>
  
  <pre><code>ul#mylist li {
      display:inline;
  }
  </code></pre>