Как вертикально центрировать содержимое элемента flexbox

Я пытаюсь сосредоточить СОДЕРЖАНИЕ элемента flexbox при использовании justify-content:stretch; Похоже, что старый трюк использования display:table-cell;vertical-align:middle; не работает в этой ситуации. Что значит?Как вертикально центрировать содержимое элемента flexbox

.flex-container { 
    display:flex; 
    align-items:center; 
    justify-content:stretch; 
} 
.flex-item { 
    align-self:stretch; 
} 

<div class="flex-container"> 
    <div class="flex-item">I want to be vertically centered! But I'm not.</div> 
</div>

, прежде чем ответить: Там, кажется, много путаницы о том, что я спрашиваю. Я пытаюсь сосредоточить СОДЕРЖАНИЕ гибкого элемента. С justify-content:stretch высота элемента будет растягиваться на всю высоту контейнера, но содержимое элемента плавает вверх (по крайней мере, в Chrome).

«Картина стоит тысячи слов». (А) это то, что у меня уже есть. (B) - это то, что я хочу. enter image description here

источник

2015-01-31 emersonthis

Это может быть достигнуто за счет display ING каждый гибкий элемент в виде flex контейнера, а затем выравнивания содержимого по вертикали align-items собственности, следующим образом:

.flex-container { 
 
    display:flex; 
 
    align-items:center; 
 
    height: 200px; /* for demo */ 
 
} 
 

 
.flex-item { 
 
    align-self:stretch; 
 
    display:flex; 
 
    align-items:center; 
 
    background-color: gold; /* for demo */ 
 
}

<div class="flex-container"> 
 
    <div class="flex-item"> 
 
     I want to be vertically centered! 
 
     <s>But I'm not.</s> 
 
    </div> 
 
</div>

В качестве побочных обратите внимание: если вы опустите заявление align-items:center; от .flex-container, вы можете смело удалить align-self:stretch; из гибких элементов.

источник

2015-01-31 18:14:43

Я вижу содержимое верхнего выровненных в мобильном сафари. Это известная проблема? – emersonthis

@SDP Убедитесь, что вы также включили префикс '-webkit-'. Новый синтаксис flexbox поддерживается в iOS Safari 7.1-8.1, но только с префиксом '-webkit-', i, e, 'display: -webkit-flex;' и '-webkit-align-items: center;'. Для более старых версий вы должны использовать [старый синтаксис flexbox] (http://www.w3.org/TR/2009/WD-css3-flexbox-20090723/), включая префикс '-webkit-'. –

'stretch' не является допустимым значением для' justify-content'. Допустимые значения: «flex-start | гибкий конец | центр | пространство между | пространственно-around' – Kilmazing

Я не уверен, правильно ли я интерпретирую ваш запрос, но я думаю, что вы пытаетесь использовать «justify-content: stretch;» когда вы должны использовать flex-grow.

Im мой образец Я использовал flex: 1 автоматический; который является просто сокращенным, чтобы установить пару свойств гибкости.

HTML:

<div class="flex-container"> 
    <div class="flex-item">I'm top dog! 
    </div> 
    <div class="flex-item flex-center"> 
     I want to be vertically centered! And I am! 
    </div> 
</div>

CSS:

*{ 
    box-sizing:border-box; 
    padding:5px; 
} 
.flex-container { 
    border: 1px solid; 
    display:flex; 
    align-items:center; 
    height: 100px; 
} 
.flex-item { 
    flex: 1 auto; 
    border: 1px solid green; 
    height:100%; 
    display:flex; 
    justify-content:center; 
} 
.flex-center { 
    align-items: center; 
}

http://jsfiddle.net/p28tjskq/

Flex свойство:
https://developer.mozilla.org/en-US/docs/Web/CSS/flex

источник

2015-01-31 18:16:22 chris

Как вертикально центрировать содержимое элемента flexbox

ответ

Смежные вопросы