Выравнивание по вертикали, по центру, как?

Question

[Михаил Р.]

Всем привет!
Код блока: codepen.io/MikeRo/pen/OmJNGR

1. Пытаюсь сделать так, чтобы при наличие свободного места под текстом (относительно высоты картинки), текст выравнивался по вертикали по центру, примерно так:

Пример

2. А если, текста больше, чем высота картинки, то получается нужно автоматом уже выравнивать картинку по вертикали по центру.

Как правильно все это объединить в рамках одной конструкции?
Спасибо!

UPD
Получилось реализовать следующим методом: codepen.io/MikeRo/pen/OmJNGR
Все заявленное в задаче - работает, но остался вопрос, грамотно-ли так писать, и какие могут быть проблемы в дальнейшем?

Answer 1

[Михаил Захаров]

div.text {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}

Comments

[Михаил Р.]

.wrapper {
  width: 1000px;
  display: flex;
}
div.text {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}

Получилось лишь так...

[Михаил Захаров]

Mike Ro: ну и отлично, получилось же )

Answer 2

[Егор Живагин]

Отвечу на UPD

Не совсем грамотно, я думаю. Слишком много ненужных флексов, это делается проще - вот . Проблема только одна - поддержка IE 8- . Если это проблема)

Comments

[Михаил Р.]

Интересный вариант!
Немного поправил (нужно, чтобы было автоматическое вертикальное выравнивание обоих, а в Вашем примере только текст был по центру), в таком варианте проблем не будет?

.wrapper {
  width: 1000px;
  display: flex;
  align-items: center;
}
.text {
  align-self: auto;
}
.images {
  align-self: auto;
}

[Егор Живагин]

Mike Ro: с тем же успехом можно ничего не писать вложенным блокам, оставить родителю align-items: center и всё)

[Михаил Р.]

Егор Живагин: действительно, спасибо! магия...