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

maximuz · July 11, 2009

Приветствую всех!

У меня вопрос к специалистам.

У меня есть шапка с группой горизонтальных DIV-ов.

Задача: Отцентрировать содержимое горизонтальной группы DIV-ов по вертикали (блоки разноцветные для наглядности)

Высота блока 93px; Содержимое каждого такого блока должно быть отцентрировано по вертикали.

Подскажите пожалуйста как действовать.

Вот картинка:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

HTML

<div id="container">
  <div id="header">
	<div class="Top">
	  <div class="Logo"><img src="images/ru_logo.png" alt="ru" width="150" height="61"></div>
	  <div class="Phone"><span>(999)</span> 123-456-789</div>
	  <div class="Center">
		<div class="Slogan">Интернет магазин компьютеров и комплектующих, цифровой и офисной техники</div>
		<div class="Online">
		  <div><img src="images/ico_skype_16.png" alt="skype" width="16" height="16" align="absmiddle"><a href="#">.ru</a></div>
		  <div><img src="images/ico_icq_16.png" alt="icq" width="16" height="16" align="absmiddle"><a href="#">91819257</a></div>
		</div>
	  </div>
	</div>
	<div class="DesMenuArea">
	  <ul id="mMenu">
		<li><a href="#" title="" id="active">О компании</a></li>
		<li><a href="#" title="">Услуги</a></li>
		<li><a href="#" title="">Оплата</a></li>
		<li><a href="#" title="">Доставка</a></li>
		<li><a href="#" title="">Корпоративным клиентам</a></li>
		<li><a href="#" title="">Помощь</a></li>
	  </ul>
	</div>
  </div>
</div>

CSS

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;
}

Edited April 26, 2010 by maximuz

skatadov · July 12, 2009

Лично я бы их просто маргин-топами вниз спихнул до нужного уровня, и все.

Searcher · July 13, 2009

http://www.umade.ru/resources/css/deadcent...eadcentre2.html

Sign In

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

Question

maximuz

Link to comment

Share on other sites

2 answers to this question

Recommended Posts

skatadov

Link to comment

Share on other sites

Searcher

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information