2

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!

Community
  • 1
  • 1
Vidar Stack
  • 41
  • 1
  • 2

1 Answers1

3

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>
Stickers
  • 75,527
  • 23
  • 147
  • 186