Посередине выровняйте три пролета в делении (разной высоты)

Question

ОК с учетом этой разметки:

<div class="wrapper">
<span class="left"></span>
<span class="middle"></span>
<span class="right"></span>
</div>

.left и .right - фиксированные высоты, но .middle будет различной высоты.

Так что мне нужно, чтобы это выглядело какэто:

-!!-, а не _!!_, который по умолчанию.

Как этого достичь?

Answer 1

Вы можете расширить ответ, который вам дали вчера .

По сути, просто добавьте vertical-align: middle к элементам с помощью display: inline-block.

См.: http://jsfiddle.net/thirtydot/qk4dW/1/ - или здесь для идентичного кода, но с самым высоким средним элементом.

.wrapper {
    text-align: center;
}
.left, .middle, .right {
    vertical-align: middle;

    display:inline-block;
    /* if you need ie6/7 support */
    *display: inline;
    zoom: 1
}
.left, .right {
    height: 100px
}

div {
    border: 1px solid #f0f
}