Question

我正在尝试将content pseudo-element的{{1}}属性中的文字居中。我搜索了一些答案并找到了属性after和vertical-align: baseline;，但它没有用。我还尝试将display: inline-block;和vertical-align: middle;与vertical-align: -50%（也来自其他答案）结合使用，但无法弄清楚它为什么不起作用。目前我的display: block;位于底部，没有像我预期的那样居中。有什么想法吗？

"!"

.wrapper {
  width: 25px;
  height: 25px;
  border-radius: 25px;
  border: 1px solid #93B8C2;
  padding: 5px;
  position: relative;
}

.wrapper::after {
  content: "!";
  width: 10px;
  height: 10px;
  border-radius: 10px;
  background: #DD3322;
  display: inline-block;
  color: white;
  text-align: center;
  position: absolute;
  right: 0;
  top: 25px;
  vertical-align: baseline;
  padding: 3px;
}

Answer 1

找到我自己的答案：我使用flexbox属性display: flex;，align-items: center;和justify-content: center;解决了这个问题，以解决pseuo-element的垂直对齐问题。我也可以删除text-align和vertical-align属性。

以下解决方案：

＆＃13;

.wrapper {
  width: 25px;
  height: 25px;
  border-radius: 25px;
  border: 1px solid #93B8C2;
  padding: 5px;
  position: relative;
}

.wrapper::after {
  content: "!";
  width: 10px;
  height: 10px;
  border-radius: 10px;
  background: #DD3322;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  position: absolute;
  right: 0;
  top: 25px;
  padding: 3px;
}

＆＃13;

<div class="wrapper"></div>

＆＃13;

伪元素的内容属性中的垂直中心文本

1 个答案: