Помощ при програмиране, отговори на въпроси / Html / Центриране на текст вертикално и хоризонтално във флекс елемент - html, css, css3, flexbox, центриране

Центриране на текст вертикално и хоризонтално в елемент flex - html, css, css3, flexbox, центриране

Опитвах се да проследя примера на flexbox и моята линия не работи за този проблем.

Текстът трябва да бъде центриран вертикално, но не е. Остава на върха само в хоризонтално положение.

В кодовия фрагмент изглежда да работи добре, но само за да докаже, че това е странно, ще дам картина на това, което виждам.

Аз тествах това в Chrome и IE, но това не е вертикално центриране.

Промених размерите в откъса, но не мисля, че ще го направя.

.flex-container {
display: flex;
flex-flow: row wrap;
justify-content: space-around;
padding: 0;
margin: 0;
list-style: none;
display: -webkit-box;
display: moz-box;
display: -ms-flexbox;
display: -webkit-flex;
-webkit-flex-flow: row wrap;
}
.flex-item {
background: tomato;
padding: 5px;
width: 50px;
height: 50px;
margin-top: 10px line-height: 50px;
color: white;
font-weight: bold;
font-size: 3em;
text-align: center;
}

<ul class="flex-container">
<li class="flex-item">1</li>
<li class="flex-item">2</li>
<li class="flex-item">3</li>
<li class="flex-item">4</li>
<li class="flex-item">5</li>
<li class="flex-item">6</li>
</ul>

Отговори:

2 за отговор № 1

За вертикално и хоризонтално центриране на текста във всеки елемент на гъвкавостта, направете тази корекция на кода си:

.flex-container {
display: flex;
flex-flow: row wrap;
justify-content: space-around;
padding: 0;
margin: 0;
list-style: none;
display: -webkit-box;
display: moz-box;
display: -ms-flexbox;
display: -webkit-flex;
-webkit-flex-flow: row wrap;
}
.flex-item {
display: flex;                /* create nested flex container */
justify-content: center;      /* center text horizontally */
align-items: center;          /* center text vertically */
background: tomato;
padding: 5px;
width: 50px;
height: 50px;
color: white;
font-weight: bold;
font-size: 3em;
}

<ul class="flex-container">
<li class="flex-item">1</li>
<li class="flex-item">2</li>
<li class="flex-item">3</li>
<li class="flex-item">4</li>
<li class="flex-item">5</li>
<li class="flex-item">6</li>
</ul>

За повече подробности вижте: Flexbox: център хоризонтално и вертикално

0 за отговор № 2

Пропуснал си ";" след margin-top в flex-item, което прави неактивната височина на линията