CODEWITHSUNDEEP
htmlcsspositionalignment
Saad
Saad

Reputation: 53959

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

Upvotes: 2

Views: 228

Answers (3)

MrFusion
MrFusion

Reputation: 911

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

Upvotes: 2

Karthik
Karthik

Reputation: 1751

@MrFusion has better answer. Please prefer that method.

But if you don't want icons and texts to be in same ul try defining fixed width for lis.

#skills li {
    display: inline-block;
    margin: 0 40px;
    text-align: center;
    width: 100px;
}

Upvotes: 3

andre mcgruder
andre mcgruder

Reputation: 1520

If I were to create this I would have one list item grouping. Each of the

  • would have the img tag for the icon along with an tag or any other block level element. This allows me to scope my CSS to the
  • ’s and all of them would be affected by my styles. It’s like creating individual uniform boxes for my icons and titles. The method that you are using now makes it complicated. If things change in the future you will have two areas to keep an eye on.

    If you wish to continue down this road though you could try giving the #skills li a fixed width and they should all line up.

    Upvotes: 0

    • Related Questions