Как выровнять текст по вертикали в div?
ВАЖНО: Пространства являются предпочтительным методом - см. PEP008 Отступы и вкладки или пробелы? . (Спасибо @Siha за это.)
Для пользователей Sublime Text:
Установите Sublime Text для использования вкладок для отступов: View -> Indentation - > Convert Indentation to Tabs
Снимите флажок Indent Using Spaces, а также в том же подменю выше. Это немедленно устранит эту проблему.
2 ответа
Вертикальное центрирование в CSS
http://www.jakpsatweb.cz/css/css-vertical-center-solution.html
Краткое содержание статьи:
Для браузера CSS 2 можно использовать display: table / display: table-cell для центрирования содержимого.
Образец также доступен по адресу JSFiddle :
div {border: 1px solid green;} Можно объединить хаки для старых браузеров (Internet Explorer 6/7) в стили с помощью # , чтобы скрыть стили из новых браузеров:
div {border: 1px, сплошной зеленый;} Flexbox работал отлично на меня, центрируя несколько элементов в родительском отделении горизонтально & вертикально.
КОД HTML:
<div class="parent-div">
<div class="child-div">
<a class="footer-link" href="https://www.github.com/">GitHub</a>
<a class="footer-link" href="https://www.facebook.com/">Facebook</a>
<p class="footer-copywrite">© 2019 Lorem Ipsum.</p>
</div>
</div>
код CSS:
Код ниже складывает все элементы в родительском отделении в столбце, центрируя элементы горизонтально & вертикально. Я использовал дочернее отделение для хранения двух элементов Привязки на той же строке (строка). Без дочернего отделения все три элемента (Привязка, Привязка & Абзац), сложены столбец внутреннего родительского отделения друг на друге. Здесь только дочернее отделение сложено внутренний столбец родительского отделения.
/* */
.parent-div {
height: 150px;
display: flex;
flex-direction: column;
justify-content: center;
}