Форум hotibo.ru

Сайты - по стандартам, но не стандартные сайты!







#1 11.07.2013 13:35

maximuz
Новичок
Зарегистрирован: 11.07.2013
Сообщений: 1

Как отцентровать содержимое горизонтальной группы DIV-ов по вертикали?

Приветствую!
Скажите пожалуйста, как отцентрировать содержимое горизонтальной группы DIV-ов по вертикали?
Речь идет о тех цветных блоках которые прилипли к "потолку". Их высота должна быть фиксированной 93px
А вот как потом центрировать по вертикали содержимое таких блоков?

-логотип
-слоган
-аська со скайпом
-контактный телефон

Пример: шапка сайта.

http://svadba.toylar.uz/images/example1.png

http://svadba.toylar.uz/images/example1.png


Код:

Код:

body {
    margin: 0;
    padding: 0;
    font-family: Tahoma, Verdana, Geneva, Arial, Helvetica, sans-serif;
}
#container {
    min-width: 1000px;
}
#header {
    background-color: #506d90;
    height: 122px;
    background-image: url(../images/header_bg.png);
    background-repeat: repeat-x;
    color: #ffffff;
    position: relative;
}
#header .Top {
    height: 93px;
    overflow: hidden;
    background-color: #ff8c00;
}
#header .Logo {
    float: left;
    width: 210px;
    background-color: fuchsia;
    text-align: center;
}
#header .Logo IMG{
}
#header .Phone {
    float: right;
    width: 210px;
    font-size: 18px;
    text-align: center;
    background-color: #ff69b4;
}
#header .Center {
    margin-left: 210px;
    margin-right: 210px;
    background-color: green;
}
#header .Slogan {
    float: left;
    width: 60%;
    background-color: olive;
}
#header .Online {
    float: right;
    width: 30%;
    background-color: #8fbc8f;
}
.DesMenuArea {
    clear: both;
    background-image: url(../images/mmenu_line_bg.png);
    background-repeat: repeat-x;
    background-position: bottom;
    height: 29px;
}

Код:

Отредактированно maximuz (12.07.2013 17:55)

Нет на форуме

 

#2 13.07.2013 08:38

vashurin
Moderator
Зарегистрирован: 14.09.2010
Сообщений: 291
Вебсайт

Re: Как отцентровать содержимое горизонтальной группы DIV-ов по вертикали?

Блоку #header .Top поставить:

Код:

#header .Top{position:relative}

И все остальные элементы можно абсолютно отпозиционировать.


С уважением, Вашурин Владимир.

Нет на форуме

 

Board footer

Ковролин -это удобное напольное покрытие. Заказать реферат и автореферат диссертации в короткие сроки