Как установить максимальную высоту пролета в одном ряду?

Question

Рассмотрим следующий HTML-код:

<span style="display: inline-block;">
<div>Caption - to display at top</div>
<div>Picture - to display at the middle</div>
</span>
<span style="display: inline-block;">
<div>Caption - to display at top</div>
<div>Picture - to display at the middle</div>
</span>

Когда эти участки отображаются рядом друг с другом (2 или 3 в ряду), я хочу, чтобы заголовки были выровнены вверху, а картинки выровненыв центре.Изображения могут быть разных размеров, а подписи могут занимать несколько строк.Например, вот что у меня сейчас: http://probqa.com/ И вот как я хочу, чтобы это выглядело: Возможно ли это сделать только в HTML /CSS?Как?

Или мне нужен JavaScript для этого?Что?

Answer 1

Чтобы поместить что-то в центр, вы можете использовать этот трюк css:

.center{
  position: fixed;
  left: 50%; /*move the top left point of block to the center*/
  transform: translate(-50%,0%);
  margin-top:60px;
}

Измените свойство margin-top, если вы хотите изменить расстояние между двумя изображениями или текстом.