Question

我正在使用css Model::validate($file);专有权将line-height元素的:before文本垂直放置在其边框的中间，如您在代码段中所见。我的问题是，如果字体大小发生变化，我希望它保持在中间位置（例如，如果用户只使用了firefox浏览器的缩放文本功能）。我想过使用li但是这不会起作用，因为line-height: calc(1 / 2em)运算符只接受右侧的数字。这是我的代码

＆＃13;

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

＆＃13;

Answer 1

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

尝试：

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

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

希望这有帮助

CSS line-height与font-size成比例反转

1 个答案: