html - 无法使文字居中和居中

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

您对此有解决方案吗？

最佳答案

最简单的方法是将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>

关于html - 无法使文字居中和居中，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/40576678/