как разместить объект вертикально в слое

[kent666]

Всем привет. Помогите пожалуйста! Не работает вертикальное выравнивание по центру. Есть код

            <div class="photo">
                <div style="float:left; width: 80px; height: 260px;  background:red; vertical-align: middle;">555
                </div>
                <div style="float:left; width: 840px; height: 260px;  background:white"></div>
                <div style="float:left; width: 80px; height: 260px;  background:red; vertical-align: middle;">555
                </div>  
            </div><!-- end photo -->

555 находиться сверху слоя. а не по середине. В чем ошибка?

[Vlad]

vertical-align не работает для блочных элементов, только для строчных. Можете сделать таблицей, установить padding сверху, использовать line-height. Что больше нравится?

[kent666]

когда я использую padding-top у меня слой вытягивается в высоту на то кол пикселей, на которое я смещаю текст вниз.

[amelice]

когда я использую padding-top у меня слой вытягивается в высоту на то кол пикселей, на которое я смещаю текст вниз.

Попробуйте задать внешнему блоку div class="photo" высоту:260px.

А внутренним блокам padding-top.

Edited July 7, 2011 by cheburek

[Vlad]

когда я использую padding-top у меня слой вытягивается в высоту на то кол пикселей, на которое я смещаю текст вниз.

Это связано с тем, что padding суммируется с заданной высотой height.

Вот здесь почитайте, как это можно обойти. Речь идёт про ширину, но к высоте так же относится.

http://htmlbook.ru/blog/shirina-bloka

[kent666]

А как будет лучшее или точнее как будет правильно!

использование border-box или верстать с учетом того что высота будет увеличена padding!

Просто меня волнует насколько корректно все будет отображаться в браузерах?

Как бы вы сделали?

            <div style="height: 260px;">
                <div style="float:left; width: 80px;  background:red;">
                    <a href="#"><img alt="" src="images/img05.jpg" style="float:right; padding-top:80px"/></a>
                </div>
                <div style="float:left; width: 840px; background:white"></div>
                <div style="float:left; width: 80px;  background:red;">
                    <a href="#"><img alt="" src="images/img06.jpg" style="float:left; padding-top:80px"/></a>
                </div>  
            </div><!-- end photo -->

[Vlad]

border-box не всеми браузерами поддерживается, учтите это. А вообще и тот и другой вариант можно использовать, они равнозначны, но с padding более распространен в силу универсальности.

[gibigate]

можно display:table-cell и vertical-align: top middle bottom

но ие6-7 не понимают(хотя expression можно наверное написать?)