无法使文本居中并居中

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＆amp; width和font-size可以小于或等于10px。

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

你有解决方案吗？

Answer 1

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

其他方法是使用Flexbox并设置align-items: center和justify-content: center。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;