Почему не работает align-items?

Question

[Богдан]

Здравствуйте, подскажите пожалуйста, почему не работает свойство align-items: center?

Comments

[Ольга]

а можно код кодом вставить, а не скринами? ) и зачем у вас столько <ul>? судя по всему это меню и оно предполагает один <ul> собственно с пунктами внутри

[Богдан]

Ольга,

<div class="section_first">
		<div class="container">
			<ul class="nav_first">
				<li class="nav_item_section_first">
					<a href="#">ИНТЕРНЕТ</a>
				</li>
				<li class="nav_item_section_first">
					<a href="#">ИНТЕРНЕТ</a>
				</li>
				<li class="nav_item_section_first">
					<a href="#">ИНТЕРНЕТ</a>
				</li>
				<li class="nav_item_section_first">
					<a href="#">ИНТЕРНЕТ</a>
				</li>
				<li class="nav_item_section_first">
					<a href="#">ИНТЕРНЕТ</a>
				</li>
				<li class="nav_item_section_first">
					<a href="#">ИНТЕРНЕТ</a>
				</li>
			</ul>
		</div>
	</div>

.container {
	width: 100%;
	max-width: 1170px;
	margin: 0 auto;
}
.section_first {
	background: #f1f3fc;
	height: 52px;
}
.nav_first {
	display: flex;
	justify-content: center;
	align-items: center;
}
.nav_item_section_first {
	/*margin-top: 17px;*/
	margin-right: 24px;
	color: #7f7f7f;
	font-family: 'Open Sans', sans-serif;
	font-weight: 300;
	font-size: 15px;
}

[Ольга]

собственно align-items: center; работает корректно, т.е. выравнивает все пункты меню по вертикали в самом элементе ul.nav_first, это становится видно, если в каком-то из пунктов меню добавить побольше текста: https://jsfiddle.net/4nb78fj0/

я так понимаю, что вы хотели чтобы само меню было по центру по вертикали в своём контейнере? в этом случае нужно контейнеру будет задать display: flex; align-items: center;
а лучше убрать у контейнера фиксированную высоту и добавить вертикальные паддинги самим пунктам меню https://jsfiddle.net/dsr4pbkx/

Answer 1

[Varrado]

попробуйте написать .nav_first ul