CSS flex-box: текст не идеально центрирован, несмотря на то, что justify-content и align-items установлены правильно - PullRequest
Новая
       8

CSS flex-box: текст не идеально центрирован, несмотря на то, что justify-content и align-items установлены правильно

0 голосов
/ 30 августа 2018

У меня есть сетка чисел, и выбранный должен быть показан с градиентом фона. Поэтому я использовал обычную процедуру с flex-box, как мы видим в коде. Но число находится не в точном центре квадрата, как должно быть. 

.cell {

  /* Square definition */
  width: 100px;
  height: 100px;
  border: 1px solid black;
  font-size: 2rem;
  
  /* Centering */
  display: flex;
  justify-content: center;
  align-items: center;
  
  /* Background at the center */
  color: white;
  background: radial-gradient(ellipse at center, red 0%,red 50%, transparent 55%);
}
<div class="cell">15</div>

Почему это происходит? Как я могу сделать так, чтобы число было точно посередине квадрата без какой-либо дополнительной разметки?

РЕДАКТИРОВАТЬ: Слева это, как это выглядит сейчас, справа это, как я думаю, это должно выглядеть. Браузер Chrome для Linux.

How it should look

РЕДАКТИРОВАТЬ II: Должна быть проблема с тем, как эта разметка отображается в Linux. Вот как я вижу codepen любезно предоставленного G-Cyr в комментарии:

enter image description here

Я попробовал ту же кодовую ручку в Windows, и она показывает идеально отцентрированное число.

1 Ответ

0 голосов
/ 30 августа 2018

Я думаю, что это не проблема flex-box, а что-то связанное с высотой строки. Один из способов преодолеть это - вручную отрегулировать высоту строки, немного поэкспериментировав так: 

.cell {

  /* Square definition */
  width: 100px;
  height: 100px;
  border: 1px solid black;
  font-size: 2rem;
  
  
  /* Centering */
  display: flex;
  justify-content: center;
  line-height:6.7rem;

  color: white;
  background: radial-gradient(ellipse at center, red 0%,red 50%, transparent 55%);

}
<div class="cell">75</div>
...