Выровнять div по вертикали в другом div-е - HTML и CSS

keen_ · 05.11.2012, 21:03

Что-то запутался и не могу выровнять.

HTML

Код:

    <div id="wrapper">
        <div id="header">
            <div id="logo">Логотип</div>
            <div id="topinfo">RTYRETYER<br />
			<div class="companyname">ERTERTER<br />
			DRTRETRET</div>
			<div class="topcontact">56Y756Y546Y4</div></div>
        </div>
        <div id="navigation">
            <ul>
                <li><a href="#">Главная</a></li>
                <li><a href="#">Услуги</a></li>
                <li><a href="#">Новости</a></li>
                <li><a href="#">О нас</a></li>
                <li><a href="#">Контакты</a></li>
            </ul>
        </div>
        <div id="leftcolumn">Отзывы клиентов</div>
        <div id="content">Основной текст</div>
        <div id="rightcolumn">Новости</div>
        <div id="footer">&copy; 2012 DRTGRTFRDTGFEW</div>
    </div>

CSS

Код:

* { padding: 0; margin: 0; }

body {
 font-family: Arial, Helvetica, sans-serif;
 font-size: 13px;
}
#navigation ul {
	list-style: none;
}
#navigation ul li {
    padding: 0 29px 0 0;
	display: inline-block;
}
#wrapper { 
 margin: 0 auto;
 width: 990px;
}
#header {
 color: #333;
 width: 968px;
 float: left;
 padding: 10px;
 border: 1px solid #ccc;
 margin: 10px 0px 5px 0px;
}
#logo {
 float: left;
 background: red;
}
#topinfo {
 float: right;
 text-align: center;
}
.companyname {
 font-family: Arial, Helvetica, sans-serif;
 padding-top: 9px;
 font-size: 16px;
 font-weight: bold;
 color: #313131;
}
.topcontact {
 padding-top: 9px;
}
#navigation {
 float: left;
 width: 968px;
 color: #333;
 padding: 10px;
 border: 1px solid #ccc;
 margin: 0px 0px 5px 0px;
}
#leftcolumn { 
 color: #333;
 border: 1px solid #ccc;
 margin: 0px 5px 5px 0px;
 padding: 10px;
 height: 350px;
 width: 195px;
 float: left;
}
#content { 
 float: left;
 color: #333;
 border: 1px solid #ccc;
 margin: 0px 5px 5px 0px;
 padding: 10px;
 height: 350px;
 width: 524px;
 display: inline;
}
#rightcolumn { 
 color: #333;
 border: 1px solid #ccc;
 margin: 0px 0px 5px 0px;
 padding: 10px;
 height: 350px;
 width: 195px;
 float: left;
}
#footer { 
 width: 968px;
 clear: both;
 color: #333;
 border: 1px solid #ccc;
 margin: 0px 0px 10px 0px;
 padding: 10px;
}

MyLastHit · 05.11.2012, 21:49

Чтоб было абсолютно по центру, нужно высоты задавать. К тому что было добавь это

Код:

#header{height: 90px;}
#logo{
  height: 20px;
  position: relative;
  top: 50%;
  margin-top: -10px;/*половина высоты элемента*/
}

keen_ · 05.11.2012, 22:11

Хотелось сделать без указания фиксированной высоты шапки.
Чтобы как в таблице было - если текста больше, то она растягивается вниз.
Там у меня справа текст (замазал серыми блоками).

Я что-то не вижу простоты и лёгкости с этими дивами. С таблицей всё проще намного, если нужно выравнять блок по центру.

keen_ · 05.11.2012, 22:18

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

Код HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <link href="styles.css" rel="stylesheet" type="text/css"/>
</head>
<body>
    <table  border="1" width="990" cellpadding="19">
	<tr>
	<td width="495">logo</td><td width="495" align="right">uyytututututyyutyutyurt<br>uyytututututyyutyutyurt<br>uyytututututyyutyutyurt<br>uyytututututyyutyutyurt<br>uyytututututyyutyutyurt</td>
	</tr>
	</table>
</body>
</html>

alex4321 · 05.11.2012, 22:43

Пробовал применить к logo margin: auto 0px; ? (при этом нужно чтобы его предок и он были блочными элементами - т.е. или display:block или display:inline-block)

keen_ · 05.11.2012, 22:55

Цитата:

Сообщение от alex4321

Пробовал применить к logo margin: auto 0px; ? (при этом нужно чтобы его предок и он были блочными элементами - т.е. или display:block или display:inline-block)

Нифига не получается что-то ...
Вот снова даю код html и css:

Код HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title></title>
        <meta content="text/html; charset=utf-8" http-equiv="content-type"/>
        <link href="styles.css" rel="stylesheet" type="text/css"/>
    </head>
    <body>
        <div class="wrapper">
            <div class="header">
                <div class="logo">
                    Логотип
                </div>
                <div class="top_info">
                    <div class="top_company">
                        Вваепкпкуепкепкуе
                    </div>
                    <div class="top_company_name">
                        Ввапкпвпвк<br/>
                        кенкуенкуенкуе
                    </div>
                    <div class="top_contact">
                        Пвапкапвкпквп<br/>
                        Ьквепкепкуепкен кепкекуеку кекуе<br/>
                        Нывак вкеапку ук<br/>
                        Цуауцка
                    </div>
                </div>
            </div>
            <div class="navigation">
                <ul>
                    <li><a href="#">Главная</a></li>
                    <li><a href="#">Услуги</a></li>
                    <li><a href="#">Новости</a></li>
                    <li><a href="#">О нас</a></li>
                    <li><a href="#">Контакты</a></li>
                </ul>
            </div>
            <div class="leftcolumn">
                Отзывы клиентов
            </div>
            <div class="content">
                Основной текст
            </div>
            <div class="rightcolumn">
                Новости
            </div>
            <div class="footer">
                &copy; 2012 Швапвеку кеауеауке
            </div>
        </div>
    </body>
</html>

Код:

* {
    margin: 0px;
    padding: 0px;
}
body {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
}
.navigation ul {
    list-style: none;
}
.navigation ul li {
    display: inline-block;
    padding: 0px 29px 0px 0px;
}
.wrapper {
    margin: 0px auto;
    width: 990px;
}
.header {
    border: 1px solid #ccc;
    color: #333;
    float: left;
    margin: 10px 0px 5px;
    padding: 10px;
    width: 968px;
}
.logo {
    background: red;
    float: left;
}
.top_info {
    float: right;
    text-align: center;
}
.top_company {
    font-size: 13px;
}
.top_company_name {
    color: #313131;
    font-size: 16px;
    font-weight: bold;
    padding-top: 9px;
}
.top_contact {
    padding-top: 9px;
}
.navigation {
    border: 1px solid #ccc;
    color: #333;
    float: left;
    margin: 0px 0px 5px;
    padding: 10px;
    width: 968px;
}
.leftcolumn {
    border: 1px solid #ccc;
    color: #333;
    float: left;
    height: 350px;
    margin: 0px 5px 5px 0px;
    padding: 10px;
    width: 195px;
}
.content {
    border: 1px solid #ccc;
    color: #333;
    display: inline;
    float: left;
    height: 350px;
    margin: 0px 5px 5px 0px;
    padding: 10px;
    width: 524px;
}
.rightcolumn {
    border: 1px solid #ccc;
    color: #333;
    float: left;
    height: 350px;
    margin: 0px 0px 5px;
    padding: 10px;
    width: 195px;
}
.footer {
    border: 1px solid #ccc;
    clear: both;
    color: #333;
    margin: 0px 0px 10px;
    padding: 10px;
    width: 968px;
}

MyLastHit · 05.11.2012, 23:27

Код:

margin: auto 0px;

Что это за бредятина?

Автору - выровнять по высоте не задав самой высоты невозможно только лишь средствами css. Сделай там табличку. Я еще никогда не сталкивался с задачей, когда установка фикс высоты для не динамического элемента была бы проблемой. Вы же делаете сайт по макету и заранее знаете высоту. Нет никакой проблемы в случае чего ее изменить.

UPD: Могу предложить JS-решение. В CSS просто задать

Код:

#logo{
          position: relative;
          top: 50%;
        }

Код:

        window.onload = function(){
            var logo = document.getElementById('logo');
                logo.style.height = logo.clientHeight+'px';
                logo.style.marginTop = -logo.clientHeight/2+'px';
            var header = document.getElementById('header');
                header.style.height = header.clientHeight-20+'px';    
        }

keen_ · 05.11.2012, 23:44

Цитата:

Сообщение от MyLastHit

Автору - выровнять по высоте не задав самой высоты невозможно только лишь средствами css. Сделай там табличку. Я еще никогда не сталкивался с задачей, когда установка фикс высоты для не динамического элемента была бы проблемой. Вы же делаете сайт по макету и заранее знаете высоту. Нет никакой проблемы в случае чего ее изменить.

Нет фиксированной высоты в шапке и быть не должно, это принципиальный вопрос, иначе бы я тут не спрашивал о выравнивании

Нужно помнить, что в старых браузерах люди увеличивают размер шрифта. При этом все остальные элементы не увеличиваются. Это значит, что текст в правой стороне выйдет за границу шапки при увеличении шрифта, если задать размер высоты шапки. Т. е. весь дизайн сломается и будет выглядеть просто стрёмно

alex4321 · 05.11.2012, 23:50

А что бредового в margin:auto 0px? :-)
Вроде как размеры верхнего и нижнего полей должны автоматом стать одинаковыми, нет?

MyLastHit · 05.11.2012, 23:51

Цитата:

Вроде как размеры верхнего и нижнего полей должны автоматом стать одинаковыми, нет?

Нет) Было бы все так хорошо - работа упростилась во много раз.

Цитата:

Нужно помнить, что в старых браузерах люди увеличивают размер шрифта.

Железный аргумент) Жаль мне этого никогда не понять. Я людей с ИЕ9- шлю качать хром всегда. Ибо нефиг.

05.11.2012, 21:49	#2
MyLastHit Очень суровый Участник клуба Регистрация: 17.12.2009 Сообщений: 1,988	Чтоб было абсолютно по центру, нужно высоты задавать. К тому что было добавь это Код: `#header{height: 90px;} #logo{ height: 20px; position: relative; top: 50%; margin-top: -10px;/половина высоты элемента/ }` Ненавижу быть как все, но люблю, чтобы все были как я.

05.11.2012, 23:27	#7
MyLastHit Очень суровый Участник клуба Регистрация: 17.12.2009 Сообщений: 1,988	Код: `margin: auto 0px;` Что это за бредятина? Автору - выровнять по высоте не задав самой высоты невозможно только лишь средствами css. Сделай там табличку. Я еще никогда не сталкивался с задачей, когда установка фикс высоты для не динамического элемента была бы проблемой. Вы же делаете сайт по макету и заранее знаете высоту. Нет никакой проблемы в случае чего ее изменить. UPD: Могу предложить JS-решение. В CSS просто задать Код: `#logo{ position: relative; top: 50%; }` Код: `window.onload = function(){ var logo = document.getElementById('logo'); logo.style.height = logo.clientHeight+'px'; logo.style.marginTop = -logo.clientHeight/2+'px'; var header = document.getElementById('header'); header.style.height = header.clientHeight-20+'px'; }` Ненавижу быть как все, но люблю, чтобы все были как я. Последний раз редактировалось MyLastHit; 05.11.2012 в 23:45.

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
Как выровнять по цетру вложенный div?	valerka92	HTML и CSS	10	11.09.2012 08:13
как выровнить div внутри другого div'a по вертикали по центру	Arassir	HTML и CSS	4	12.03.2011 20:01
Div-овая верска тянущаяся по вертикали	MarkStaver	HTML и CSS	3	08.12.2010 16:52
div тег как нижний слой для второго div тега	dadli	HTML и CSS	2	30.07.2010 01:12
растянуть div в другом div-e	slips	HTML и CSS	2	27.11.2009 15:43

05.11.2012, 22:11	#3
keen_ Форумчанин Регистрация: 07.12.2011 Сообщений: 112	Хотелось сделать без указания фиксированной высоты шапки. Чтобы как в таблице было - если текста больше, то она растягивается вниз. Там у меня справа текст (замазал серыми блоками). Я что-то не вижу простоты и лёгкости с этими дивами. С таблицей всё проще намного, если нужно выравнять блок по центру.

05.11.2012, 22:43	#5
alex4321 Пользователь Регистрация: 23.07.2012 Сообщений: 77	Пробовал применить к logo margin: auto 0px; ? (при этом нужно чтобы его предок и он были блочными элементами - т.е. или display:block или display:inline-block)

05.11.2012, 23:50	#9
alex4321 Пользователь Регистрация: 23.07.2012 Сообщений: 77	А что бредового в margin:auto 0px? :-) Вроде как размеры верхнего и нижнего полей должны автоматом стать одинаковыми, нет?