Search code examples
htmlcsspositionalignment

How can I align icons with their titles?

As you can see from this screenshot, My icons aren't aligned with their titles. They are written as two unordered lists. The only solution I have right now is to give individual margin-left to each of the icons, but I'm hoping there is a better way to do it. Any help would be very much appreciated.Screenshot

HTML:

<!-- Skills -->
<section id="skills">
  <h2>Skills</h2>
  <ul>
    <li><i class="icon-prog-java"></i></li>
    <li><i class="icon-prog-js02"></i></li>
    <li><i class="icon-html5-02"></i></li>
    <li><i class="icon-css3-02"></i></li>
    <li><i class="icon-vc-git"></i></li>
  </ul>
  <ul>
    <li>Java</li>
    <li>JavaScript</li>
    <li>HTML / XML</li>
    <li>CSS</li>
    <li>Git</li>
  </ul>
</section>

CSS: 

#skills li {
  display: inline;
  margin: 0 40px;
}
Solution

  • Integrate the icons with each of the text items. Then, make the icons be on a separate line by making them block elements. Also, each list item needs to be inline-block instead of inline:

    #skills li {
  display: inline-block;
  margin: 0 30px;
  text-align: center;
}
ul.skill-list i {
  display: block;
  /* add margins here to adjust icons */
}
    <!-- Skills -->
<section id="skills">
  <h2>Skills</h2>
  <ul class="skill-list">
    <li><i class="icon-prog-java"></i>Java</li>
    <li><i class="icon-prog-js02"></i>JavaScript</li>
    <li><i class="icon-html5-02"></i>HTML / XML</li>
    <li><i class="icon-css3-02"></i>CSS</li>
    <li><i class="icon-vc-git"></i>Git</li>
  </ul>
</section>

<!-- Pictonic library, ignore this -->
<link href="https://cdn.jsdelivr.net/gh/thedrick/tylerhedrick.me@master/resources/pictonic/css/pictonic.css" rel="stylesheet" />