0

Как сделать вертикальное центрирование текста в этом <div> и как перенести буквы которые не поместились в блоке на новую строку?

<div style='width: 75px;height: 75px;border: 2px solid #777; padding: 10px;border-radius: 5px;font-family: Arial Narrow, sans-serif;
	font-size:16px;background:#4e27d3;color:#fff;font-weight:bold;text-align:center;vertical-align: middle;'>Формирование задачи</div>

2 ответа 2

2

Для переноса добавьте word-break: break-all;, а для центровки display: flex; align-items: center; justify-content: center;

.block {
    width: 75px;
    height: 75px;
    border: 2px solid #777;
    padding: 10px;
    border-radius: 5px;
    font-family: Arial Narrow, sans-serif;
    font-size: 16px;
    background: #4e27d3;
    color: #fff;
    font-weight: bold;
    text-align: center;
    vertical-align: middle;
    display: flex;
    align-items: center;
    justify-content: center;
    word-break: break-all;
}
<div class="block">
    Формирование задачи
</div>

1
1

Для переноса букв на следующую строку используйте "word-wrap: break-word;" в style Описание атрибута

Проблему с высотой можно исправить с помощью атрибута line-height и подобрать значение для него Пример использования, в том числе и для div найдете здесь

1
  • Конкретно для данного примера line-height не отцентрирует текст в пределах блока, а просто будет увеличивать растояние между строк, что позволит только растянуть на весь блок.
    – E_K
    19 ноя 2018 в 23:09

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.