Блог

Мне нужен центр, чтобы центрировать некоторый текст по осям X и Y. Я заметил, что мой текст не на полную высоту, что является лучшим решением для придания тексту полной высоты?

Я попытался центрировать с помощью: 1. Высота строки 2. Преобразование 3. Flex 4. Таблица — ячейка таблицы — выравнивание по вертикали

HTML:

 <div class="block">
        <p> 3 </p>
      </div>
  

SCSS:

 .block {
    display: table;
    width: 50px;
    height: 50px;
    padding: 0 10px;
    border-radius: 4px;
    box-sizing: border-box;
    font-size: 14px;
    background-color: #ecf3f5;
    border: 1px solid #c9dee4;
    margin-right: 20px;

    p {
      display: table-cell;
      vertical-align: middle;
      text-align: center;
    }
}
  

Что я имел в виду под полной высотой

Эта высота действительно имеет значение, для мелкого шрифта она не видна, но с большим шрифтом она действительно не центрирована.

Я ожидаю центрировать этот текст.

Я думаю, что flex — лучший и универсальный метод центрирования элемента по X и Y, поэтому добавьте display: flex;justify-content: center;align-items: center; к себе родительский блок. После этого вы можете использовать любую высоту шрифта, какую захотите.

 .block {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50px;
    height: 50px;
    padding: 0 10px;
    border-radius: 4px;
    box-sizing: border-box;
    font-size: 14px;
    background-color: #ecf3f5;
    border: 1px solid #c9dee4;
    margin-right: 20px;
}
p {
    line-height: 20px;
}  

 <div class="block">
  <p> 3 </p>
</div>  

Я обнаружил проблему, выравнивание было вызвано семейством шрифтов, в моем случае я использовал Helvetica, после изменения выравнивания текста исправлено.

https://giphy.com/gifs/SYFl4xIvOdFS6e8X9q/html5