CSS 行高与字体大小成比例地反转

Question

我正在使用 css line-height 属性将 li 元素的 :before 文本垂直放置在它的边框中间正如您在代码片段中看到的那样。我的问题是，如果字体大小发生变化，我希望它保持在中间(例如，如果用户使用 firefox 浏览器的仅缩放文本功能)。我想过使用 line-height: calc(1/2em) 但这行不通，因为 / 运算符只接受右侧的数字。这是我的代码

li {
     list-style-type: none;
     width: 20%;
     float: left;
     font-size: 10px;
     position: relative;
     text-align: center;
     text-transform: uppercase;
     color: purple;
}
li:before {
     width: 40px;
     height: 40px;
     border: 4px solid purple;
     content: counter(step);
     counter-increment: step;
     line-height: 40px;
     font-size: 15px;
     display: block;
     text-align: center;
     margin: 0 auto 10px auto;
     border-radius: 50%;
}

<ul>
<li> element</li>
<li> element</li>
<li> element</li>
<ul>

Answer 1

您可以使用 flexbox 来对齐 li 中的元素，我认为这是比 line-height 更好的解决方案

尝试:

  display: flex;
  align-items: center;
  justify-content: center;

在您的 li:before 中删除 line-height。我想您会得到想要的结果。

希望对你有帮助