Как выровнять блоки?

Question

[seredaes]

Я вот сделал набросок.
ПРИМЕР НА jsfiddle.net

Нужно, чтобы 3 блока были по центру. Но если в одном из них текста больше чем в других, все остальные опускаются. Вариант float:left решает проблему, но тогда блоки не по центру.

Подскажите, можно как-то порешать, чтобы и по центру оставались и вверху всегда были?

Answer 1

[Дмитрий]

.main {
  width:700px;
	height : 400px;
  margin:0 auto;
  background:red;
  text-align:center;
	display: flex ;
	flex-wrap: wrap;
	justify-content: center;
}

.item {
	flex:1;
  background:green;
  width:200px;
	height: 100px;
  color:#fff;
  font-size:16px;
}

Answer 2

[name surname]

допишите в .item

.item {
  vertical-align:top; 
}