Задать вопрос
ega22a
@ega22a
Учусь на информационные системы (по отраслям)
html

Как сделать вертикальное выравнивание текста в диве?

Здравствуйте!
У меня не получается отцентрировать текст в кнопках меню. Как мне сделать так, чтобы текст в дивах был по центру не только по горизонтали, но и по вертикали?
HTML:
<!DOCTYPE html>
<html>
	<head>
		<title>Главная Страница</title>
		<meta charset="UTF-8">
		<link rel="stylesheet" href="css/template-of-index-page.css">
		<link rel="stylesheet" href="css/head.css">
	</head>
	<body>
	<div class="head">
		<div class="header-menu-left">
			<nav class="nav-left">
				<div class="button-1">
					<a href="#">%USERNAME%</a>td>
				</div>
				<div class="button-2">
					<a href="#">Магазин</a>
				</div>
				<div class="button-3">
					<a href="#">Библиотека</a>
				</div>
				<div class="button-4">
					<a href="#">Сообщество</a>
				</div>
				<div class="button-5">
					<a href="#">Скачать</a>
				</div>
			</nav>
		</div>
		<div class="header-menu-right">
			<nav class="nav-right">
				<div class="button-1">
					<a href="#">
						<div class="link">
							<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
							width="485.213px" height="485.213px" viewBox="0 0 485.213 485.213" style="enable-background:new 0 0 485.213 485.213;"
							xml:space="preserve">
								<g>
									<path d="M471.882,407.567L360.567,296.243c-16.586,25.795-38.536,47.734-64.331,64.321l111.324,111.324
									c17.772,17.768,46.587,17.768,64.321,0C489.654,454.149,489.654,425.334,471.882,407.567z"/>
									<path d="M363.909,181.955C363.909,81.473,282.44,0,181.956,0C81.474,0,0.001,81.473,0.001,181.955s81.473,181.951,181.955,181.951
									C282.44,363.906,363.909,282.437,363.909,181.955z M181.956,318.416c-75.252,0-136.465-61.208-136.465-136.46
									c0-75.252,61.213-136.465,136.465-136.465c75.25,0,136.468,61.213,136.468,136.465
									C318.424,257.208,257.206,318.416,181.956,318.416z"/>
									<path d="M75.817,181.955h30.322c0-41.803,34.014-75.814,75.816-75.814V75.816C123.438,75.816,75.817,123.437,75.817,181.955z"/>
								</g>
						</div>
					</a>
				</div>
				<div class="button-2">
					<a href="#">
						<div class="link">
							<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
							viewBox="0 0 25.729 25.729" style="enable-background:new 0 0 25.729 25.729;" xml:space="preserve">
								<g>
									<path d="M16.428,15.744c-0.159-0.052-1.164-0.505-0.536-2.414h-0.009c1.637-1.686,2.888-4.399,2.888-7.07
									c0-4.107-2.731-6.26-5.905-6.26C9.69,0,6.974,2.152,6.974,6.26c0,2.682,1.244,5.406,2.891,7.088
									c0.642,1.684-0.506,2.309-0.746,2.396c-3.324,1.203-7.224,3.394-7.224,5.557c0,0.584,0,0.23,0,0.811
									c0,2.947,5.714,3.617,11.002,3.617c5.296,0,10.938-0.67,10.938-3.617c0-0.58,0-0.227,0-0.811
									C23.835,19.073,19.916,16.899,16.428,15.744z"/>
								</g>
						</div>
					</a>
				</div>
				<div class="button-3">
					<a href="#">
						<div class="link">
							<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
							width="122.775px" height="122.776px" viewBox="0 0 122.775 122.776" style="enable-background:new 140 140 140 140;"
							xml:space="preserve">
								<g>
									<path d="M86,28.074v-20.7c0-3.3-2.699-6-6-6H6c-3.3,0-6,2.7-6,6v3.9v78.2v2.701c0,2.199,1.3,4.299,3.2,5.299l45.6,23.601
									c2,1,4.4-0.399,4.4-2.7v-23H80c3.301,0,6-2.699,6-6v-32.8H74v23.8c0,1.7-1.3,3-3,3H53.3v-30.8v-19.5v-0.6c0-2.2-1.3-4.3-3.2-5.3
									l-26.9-13.8H71c1.7,0,3,1.3,3,3v11.8h12V28.074z"/>
									<path d="M101.4,18.273l19.5,19.5c2.5,2.5,2.5,6.2,0,8.7l-19.5,19.5c-2.5,2.5-6.301,2.601-8.801,0.101
									c-2.399-2.399-2.1-6.4,0.201-8.8l8.799-8.7H67.5c-1.699,0-3.4-0.7-4.5-2c-2.8-3-2.1-8.3,1.5-10.3c0.9-0.5,2-0.8,3-0.8h34.1
									c0,0-8.699-8.7-8.799-8.7c-2.301-2.3-2.601-6.4-0.201-8.7C95,15.674,98.9,15.773,101.4,18.273z"/>
								</g>
							</svg>
						</div>
					</a>
				</div>
			</nav>
		</div>
	</div>
	</body>
</html>

CSS:
@font-face {
	font-family: Roboto-Black;
	src: url(../fonts/Roboto/Roboto-Black.ttf);
}

@font-face {
	font-family: Roboto-Black-Italic;
	src: url(../fonts/Roboto/Roboto-BlackItalc.ttf);
}

@font-face {
	font-family: Roboto-Bold;
	src: url(../fonts/Roboto/Roboto-Bold.ttf);
}

@font-face {
	font-family: Roboto-Bold-Italic;
	src: url(../fonts/Roboto/Roboto-BoldItalic.ttf);
}

@font-face {
	font-family: Roboto-Italic;
	src: url(../fonts/Roboto/Roboto-Italic.ttf);
}

@font-face {
	font-family: Roboto-Light;
	src: url(../fonts/Roboto/Roboto-Light.ttf);
}

@font-face {
	font-family: Roboto-Light-Italic;
	src: url(../fonts/Roboto/Roboto-LightItalic.ttf);
}

@font-face {
	font-family: Roboto-Medium;
	src: url(../fonts/Roboto/Roboto-Medium.ttf);
}

@font-face {
	font-family: Roboto-Medium-Italic;
	src: url(../fonts/Roboto/Roboto-MediumItalic.ttf);
}

@font-face {
	font-family: Roboto-Regular;
	src: url(../fonts/Roboto/Roboto-Regular.ttf);
}

@font-face {
	font-family: Roboto-Thin;
	src: url(../fonts/Roboto/Roboto-Thin.ttf);
}

@font-face {
	font-family: Roboto-Thin-Italic;
	src: url(../fonts/Roboto/Roboto-ThinItalic.ttf);
}

body {
	
}

.head {
	font-family: Roboto-Light;
	background-color: rgba(0, 0, 0, 0.8);
	position: absolute;
	width: 100%;
	height: 5%;
	left: 0;
	top: 0;
}
/* Header Menu Left */

.header-menu-left {
	position: absolute;
	width: 50%;
	height: 100%;
}

.header-menu-left .button-1 {
	position: absolute;
	top: 0;
	left: 0;
	width: 20%;
	height: 100%;
	transition: 0.5s ease-in-out;
}

.header-menu-left .button-1:hover {
	background-color: rgba(0, 0, 0, 1);
}

.header-menu-left .button-2 {
	position: absolute;
	top: 0;
	left: 20%;
	width: 20%;
	height: 100%;
	transition: 0.5s ease-in-out;
}

.header-menu-left .button-2:hover {
	background-color: rgba(0, 0, 0, 1);
}

.header-menu-left .button-3 {
	position: absolute;
	top: 0;
	left: 40%;
	width: 20%;
	height: 100%;
	transition: 0.5s ease-in-out;
}

.header-menu-left .button-3:hover {
	background-color: rgba(0, 0, 0, 1);
}

.header-menu-left .button-4 {
	position: absolute;
	top: 0;
	left: 60%;
	width: 20%;
	height: 100%;
	transition: 0.5s ease-in-out;
}

.header-menu-left .button-4:hover {
	background-color: rgba(0, 0, 0, 1);
}

.header-menu-left .button-5 {
	position: absolute;
	top: 0;
	left: 80%;
	width: 20%;
	height: 100%;
	transition: 0.5s ease-in-out;
}

.header-menu-left .button-5:hover {
	background-color: rgba(0, 0, 0, 1);
}

.nav-left div {
	text-align: center;
}

.header-menu-left a {
	text-decoration: none;
	display: block;
	position: absolute;
	width: 100%;
	height: 100%;
	/* line-height: 250%; */
	color: rgba(140, 140, 140, 1);
	transition: 0.5s ease-in-out;
}

.header-menu-left a:hover {
	color: rgba(255, 255, 255, 1)
}

/* Header Menu Right */

.header-menu-right {
	position: absolute;
	width: 10%;
	height: 100%;
	left: 90%;
}

.header-menu-right .button-1 {
	position: absolute;
	top: 0;
	left: 0;
	width: 33.333%;
	height: 100%;
	transition: 0.5s ease-in-out;
}

.header-menu-right .button-1:hover {
	background-color: rgba(0, 0, 0, 1);
}

.header-menu-right .button-2 {
	position: absolute;
	top: 0;
	left: 33.333%;
	width: 33.333%;
	height: 100%;
	transition: 0.5s ease-in-out;
}

.header-menu-right .button-2:hover {
	background-color: rgba(0, 0, 0, 1);
}

.header-menu-right .button-3 {
	position: absolute;
	top: 0;
	left: 66.666%;
	width: 33.333%;
	height: 100%;
	transition: 0.5s ease-in-out;
}

.header-menu-right .button-3:hover {
	background-color: rgba(0, 0, 0, 1);
}

.nav-right div {
	text-align: center;
}

.header-menu-right .link {
	position: absolute;
	width: 100%;
	height: 100%;
	line-height: 250%;
	fill: rgba(140, 140, 140, 1);
	transition: 0.5s ease-in-out;
}

.header-menu-right .link:hover {
	fill: rgba(255, 255, 255, 1);
}

.header-menu-right svg {
	width: 50%;
	height: 50%;
	vertical-align: sub;
}


Закомментированный line-height работает только в моём разрешении экрана.
Прошу, помогите пожалуйста!
  • Вопрос задан
  • 1013 просмотров
Комментировать
Подписаться 2 Оценить Комментировать
Пригласить эксперта
Ответы на вопрос 4
Sanan07
@Sanan07
Писатель-прозаик
Для div 
display: flex;
justify-content: center;
align-items: center;
Ответ написан
7 комментариев
7 комментариев
@quant78
valign: top;
Ответ написан
Комментировать
Комментировать
Nordborn
@Nordborn
Frontend
frontender.info/centering-css-complete-guide
Ответ написан
Комментировать
Комментировать
Emptyform
@Emptyform
Центрировать по вертикали текст в кнопках можно двумя способами (есть еще варианты, но на мой взгляд это все херня).

1. Задать правильные паддинги сверху и снизу.
Можно только сверху, но если это кнопка из ссылки, то правильнее чтобы паддинги занимали всю площать кнопки, тогда не нужно будет пользователю попадать вышкой именно в строку текста.

2. Задать тексту line-height равным высоте кнопки.
Тут момент - если кнопка стилизована из ссылки, то справа и слева от текста. кнопка кликабельна не будет, если не задать паддинги слема/справа

Наиболее правильный способ - первый, т.к. если через месяцок придет менеджер и скажет "залупи ка мне <воооот такоооое охрененнно динннннное название к кнопке>", то есть вероятность, что текст будет в две строки и получится хня.
Ответ написан
Комментировать
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
Тестировщик-стажёр
ITooLabs • Тула
от 35 000 до 40 000 ₽
Fullstack PHP Developer
Smapse Education
от 40 000 до 65 000 ₽
Trainee - IT Support
move2usajobs.com LLC • Лос-Анджелес
от 2 000 до 4 000 $
Ещё вакансии
Заказы с Хабр Фриланса
Найти ошибку flutter_map
26 апр. 2024, в 05:31
1000 руб./за проект
Разработать электронику для весов с Wi-Fi
26 апр. 2024, в 01:22
1000 руб./в час
Очень срочно нужно помочь запустить программу с UI
26 апр. 2024, в 00:13
1000 руб./за проект
Ещё заказы