CODEWITHSUNDEEP
htmlcss
Vidar Stack
Vidar Stack

Reputation: 41

How to vertically align icon with label?

I am trying to align some font element vertically in a list. I tried a bunch of thing such as playing with the vertical-align property and setting the same font-size / line-height.

I saw an interesting answer here however it seems that the base line of the label is vertically align with the icon and not the whole text itself.

ul {
  list-style : none
}

.list-item__content {
  padding: 10px;
  border: 1px solid black;
}
.icon {
  font-size: 14px;
  line-height: 14px;
  vertical-align: middle;
}

.label {
  //vertical-align: middle;
  font-size: 14px;
  line-height: 14px;
}
<link href="https://file.myfontastic.com/tYAxi8yq9HQugtnVmUJTNm/icons.css" rel="stylesheet">
<ul class="list">
  <li class="list-item">
    <div class="list-item__content">
      <span class="icon icon-bell"></span>
      <span class="label">
        aaaaaa
      </span>
    </div>
  </li>
  <li class="list-item">
    <div class="list-item__content">
      <span class="icon icon-bookmark"></span>
      <span class="label">
        bbbbbb
      </span>
    </div>
  </li>
  <li class="list-item">
    <div class="list-item__content">
      <span class="icon icon-briefcase"></span>
      <span class="label">
        cccccc
      </span>
    </div>
  </li>
</ul>

Here is my clean playground, it is kind of tough because I don't want to use flexbox for compatibility issue, and I can't afford to play with the padding/margin/line-height for each element because I need a generic solution.

Looking forward to any tips or tricks you have!

Upvotes: 2

Views: 5642

Answers (1)

Stickers
Stickers

Reputation: 78676

Try setting the properties directly on the pseudo :before element (which the icon uses).

.icon:before, .label {
  vertical-align: middle;
  font-size: 14px;
  line-height: 1;
}

Updated jsfiddle

ul {
  list-style : none
}
.list-item__content {
  padding: 10px;
  border: 1px solid black;
}
.icon:before, .label {
  vertical-align: middle;
  font-size: 14px;
  line-height: 1;
}
<link href="https://file.myfontastic.com/tYAxi8yq9HQugtnVmUJTNm/icons.css" rel="stylesheet">
<ul class="list">
  <li class="list-item">
    <div class="list-item__content">
      <span class="icon icon-bell"></span>
      <span class="label">
        aaaaaa
      </span>
    </div>
  </li>
  <li class="list-item">
    <div class="list-item__content">
      <span class="icon icon-bookmark"></span>
      <span class="label">
        bbbbbb
      </span>
    </div>
  </li>
  <li class="list-item">
    <div class="list-item__content">
      <span class="icon icon-briefcase"></span>
      <span class="label">
        cccccc
      </span>
    </div>
  </li>
</ul>

Upvotes: 3

Related Questions