Jump to content

как отцентрировать <div> блоки?

DJ Sergeich

By DJ Sergeich,
in Goods and Services

 Share

Recommended Posts

rash Explorer

rash

Posted
Posted
Внешнему блоку display: inline-block; text-align: center

Внутренним блокам: display: inline-block; width: 200px; height: 200px

Для IE может понадобиться переопределение display: inline-block в display: inline

Не пойдет, ему готовый код нужен...

Link to comment
Share on other sites
psywalker Explorer

psywalker

Posted
Posted
Внешнему блоку display: inline-block; text-align: center

Внутренним блокам: display: inline-block; width: 200px; height: 200px

Для IE может понадобиться переопределение display: inline-block в display: inline

Не пойдет, ему готовый код нужен...

Да, зря ты старался...

Link to comment
Share on other sites
  • 3 weeks later...
mishka Explorer

mishka

Posted
Posted (edited) 

<!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>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>Layout</title>
	<link rel="stylesheet" type="text/css" href="css/all.css"/>
</head>
<body>
<!-- wrapper -->
<div id="wrapper">
	<div class="mc-1">
		<div class="mc-2">
			<div class="hold-image"><img src="img/ico-heart.gif" alt="" /></div>
			<div class="hold-image"><img src="img/ico-heart.gif" alt="" /></div>
			<div class="hold-image"><img src="img/ico-heart.gif" alt="" /></div>
			<div class="hold-image"><img src="img/ico-heart.gif" alt="" /></div>
			<div class="hold-image"><img src="img/ico-heart.gif" alt="" /></div>
			<div class="hold-image"><img src="img/ico-heart.gif" alt="" /></div>
			<div class="hold-image"><img src="img/ico-heart.gif" alt="" /></div>
			<div class="hold-image"><img src="img/ico-heart.gif" alt="" /></div>
		</div>
	</div>
</div>
<!-- end wrapper -->
</body>
</html>

body{
	margin:0;
}
#wrapper{
	height:1%;
	text-align:center;
	overflow:hidden;
	position:relative;
	margin:0 10px;
}
.mc-1{
	position:relative;
	float:left;
	left:50%;
}
.mc-2{
	position:relative;
	float:left;
	left:-50%;
}
img{
	display:block;
}
.hold-image{
	width:64px;
	float:left;
}

если какие вопросы #icq 413-5три7-420

Edited by mishka2
Link to comment
Share on other sites
mishka Explorer

mishka

Posted
Posted (edited)
Молодец, заходи почаще, такие мастера нам нужны! :)

если действительно нужны то #icq я оставил :)

только чтото мой пример несовсем правильно себя ведет в фф3.0 (фф3.5 нету, немогу проверить) и сафари 3, ну и хром естессно, если блоки становятся в 2 рада и больше... :) так что пока нерешена проблема

Edited by mishka2
Link to comment
Share on other sites
mishka Explorer

mishka

Posted
Posted (edited) 

<!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>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
	<title>Layout</title>
	<link rel="stylesheet" type="text/css" href="css/all.css"/>
</head>
<body>
<!-- wrapper -->
<div id="wrapper">
	<div class="mc-1">
		<div class="mc-2">
			<div class="hold-image"><img src="img/ico-heart.gif" alt="" /></div>
			<div class="hold-image"><img src="img/ico-heart.gif" alt="" /></div>
			<div class="hold-image"><img src="img/ico-heart.gif" alt="" /></div>
			<div class="hold-image"><img src="img/ico-heart.gif" alt="" /></div>
			<div class="hold-image"><img src="img/ico-heart.gif" alt="" /></div>
			<div class="hold-image"><img src="img/ico-heart.gif" alt="" /></div>
			<div class="hold-image"><img src="img/ico-heart.gif" alt="" /></div>
			<div class="hold-image"><img src="img/ico-heart.gif" alt="" /></div>
			<div class="hold-image"><img src="img/ico-heart.gif" alt="" /></div>
		</div>
	</div>
</div>
<!-- end wrapper -->
</body>
</html>

body{
	margin:0;
}
img{margin:0;border:0;display:block;}/* чтобы имга вела себя одинаково во всех браузерах, в данном примере обнуление стоит глобально, но в реальных проектах так не делайте (очень дурной тон) */
#wrapper{
	overflow:hidden;/* для избежания лишнего горизонтального скролла */
	position:relative;/* без этого overflow:hidden; не во всех браузерах работает (ие7) */
	text-align:center;/* для фф2 */
	height:1%;/* для ие6 так как без ширины либо высоты в ие6 неработает overflow:hidden;*/
	margin:0 10px;/* для красоты :) */
	background:#ff0;/* для красоты :) */
}
.mc-1{
	position:relative;
	float:left;
	left:50%;
}
.mc-2{
	position:relative;
	float:left;
	left:-50%;
}
.hold-image{
	display:inline-block;/* для всех браузеров кроме ие и фф2 */
	display:-moz-inline-box;/* для фф2 (невалидно но зато универсально... чемнибудь приходится жертвовать) */
	width:64px;
	overflow:hidden;
}
* html .hold-image{/* для ие6 */
	float:left;/*ксожалению display:inline; неработает, так как имге стоит display:block; ну и естесственно небудет работать если внутри будет блочный елемент*/
}
*+html .hold-image{/* для ие7 */
	float:left;
}

Поведение в ие отличается от поведения в других браузерах, но это максимум чего я смог добится (в ие новый ряд(если он не на всю ширину) начинается с левого края, в остальных центрируется)

А лучше всего margin:0 auto; и js-ом ширину просчитывать и не парить мозги :)

Edited by mishka2
Link to comment
Share on other sites
 Share
Go to topic listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy

  I accept