Question

我试图在列表中垂直对齐某些字体元素。我试了很多东西，比如使用vertical-align属性并设置相同的font-size / line-height。

我看到一个有趣的答案here但是看起来标签的基线与图标垂直对齐而不是整个文本本身。

＆＃13;

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

＆＃13;

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

＆＃13;

Here是我干净的游乐场，它有点难度，因为我不想使用flexbox来解决兼容性问题，而且我无法承受使用padding / margin / line - 每个元素的高度，因为我需要一个通用的解决方案。

期待您的任何提示或技巧！

Answer 1

尝试直接在伪:before元素（图标使用）上设置属性。

.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>

如何将图标与标签垂直对齐？

1 个答案: