html - 无法使文本居中居中

Question

.css {
    background: highlight none repeat scroll 0 0;
    border-radius: 50%;
    color: rgb(255, 255, 255);
    height: 10px;
    padding: 3px;
    text-align: center;
    width: 10px;
    font-size:10px
}

和height & width和 font-size不能少于或多于 10px .

<div class="css">4</div>

您对此有解决方案吗？

Answer 1

最简单的方法是将 line-height 设置为元素的 height。

.css {
  background: highlight;
  border-radius: 50%;
  color: rgb(255, 255, 255);
  height: 10px;
  padding: 3px;
  text-align: center;
  width: 10px;
  font-size: 10px;
  line-height: 10px;
}

<div class="css">4</div>

另一种方法是使用 Flexbox 并设置 align-items: center 和 justify-content: center。

.css {
  background: highlight;
  border-radius: 50%;
  color: rgb(255, 255, 255);
  height: 10px;
  padding: 3px;
  width: 10px;
  font-size: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

<div class="css">4</div>