Выравнивание блока по центру относительно body

Trust · May 30, 2008

Сабж. Ребята, выручайте! Чего-то совсем ничего в выдаче не видно :lol:

Везде описано выравнивание относительно другого блока.

Т.е. нужно отцентровать блок относительно экрана без экспрешенов и прочей лабуды. Читсый css. В коде просто блок с содержимым (тоже блоки).

vvsh · May 30, 2008

Так ты дай код, а мы попробуем исправить...

Dimitry Wolotko · May 30, 2008

<!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" xml:lang="en" lang="en">
<head>
<style type="text/css">
a {outline: none;}
body {background:#000000;margin: 0;padding: 0; color:#e5e5e5;font:16px verdana;}
#content { margin: 0 auto; width: 700px;}
</style>
</head>

<body>

<div id="content">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
</div>

</body>
</html>

Trust · May 30, 2008

Dimitry Wolotko, спасибо. Забыл написать, что нужно, как по горизонтали, так и по вертикали.

html

<?php defined( '_VALID_MOS' ) or die( '?????? ?????????' ); ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="<?php echo _LANGUAGE; ?>" 
xml:lang="<?php echo _LANGUAGE; ?>">
<head>
<meta http-equiv="Content-Type" content="text/html; <?php echo _ISO; ?>" />
<?php if ($my->id) { initEditor(); } ?>
<?php mosShowHead(); ?>
<link href="templates/<?php echo $cur_template; ?>/css/css.css" rel="stylesheet" type="text/css" />
</head>
<body>

<div id="b">
  <div id="l"></div>
  <div id="k"><?php mosLoadModules ( 'k' ); ?></div>
  <div id="m"><?php mosLoadModules ( 'm' ); ?></div>
</div>

</body>
</html>

css

/* CSS Document */

body { 
	margin:0 0 0 0;
	background:url(../images/b.jpg);
	vertical-align:middle	
}

#b {
	width:1024px;
	height:768px;
	background:url(../images/t.jpg);
	background-repeat:no-repeat;
	margin: 0 auto  
}

#k {
	width:246px;
	height:72px;
	margin-top:583px;
	background:url(../images/k.jpg);
	background-repeat:no-repeat;
	float:left;
	font-size:13px;
	font-family:"Times New Roman", Times, serif;
	color:#CCCCCC
}

a { 
	text-decoration:none; 
	color:#CCCCCC
}

#m {
	width:186px;
	height:296px;
	margin-top:359px;
	background:url(../images/m.jpg);
	background-repeat:no-repeat;
	float:right
}

#l {
	margin-left:897px;
	height:113px;
	width:76px;
	background:url(../images/l.jpg);
	background-position: left bottom;
	background-repeat:no-repeat
}

Dimitry Wolotko · May 30, 2008

По вертикали сам сделаешь, не ленись.

Trust · May 30, 2008

Dimitry Wolotko, я тему создал, чтобы как раз про верикальное выравнивание спросить))

Если по аналогии делать с горизонтальным выравниванием (margin-left:autol margin-right:auto и margin:0 auto) - у меня так не получается.

Trust · May 30, 2008

Ну что, поможет мне кто?

vvsh · May 30, 2008

Наверное нет, придется самому разбираться...

Trust · May 30, 2008

vvsh, да ладно вам. Я же серь?зно. Стал бы я тему тут создавать, если бы знал как это делать?

Dimitry Wolotko · May 30, 2008

Поиск юзай, по форуму.

Trust · May 30, 2008

Да не то вс? Нашел только выравнивание дива внутри дива, и ещ? статью, но там нужно аж три блока для выравнивая одного.

ZoNT · May 30, 2008

ну так а чем по твоему отдичается выравнивание дива внутри дива от выравнивания дива внутри боди?

Trust · May 30, 2008

Если ты знаешь, почему бы просто не подсказать?

Я вот сейчас сижу и думаю, как бы сделать то же самое, только для связки слой-боди, но ничего не получается. С момента создания темы прошло уже более четыр?х часов, а если бы кто-то просто кинул ссылку, то это время сократилось бы в разы...

Да и если бы я мог найти то, как это сделать, стал бы я создавать тему?

ZoNT · May 30, 2008

связка слой-боди ничем не отличается от связки слой-слой...

ZoNT · May 30, 2008

если я тебе вс? напишу, то ты не научишся думать сам...

Trust · May 30, 2008

Согласен, но сегодня мне пришлось и так очень много думать

К тому же, если я просто не знаю, я могу научиться только с чужих советов и других источников.

Trust · May 30, 2008

Вот что получилось. Но это работает неправильно. Поправьте пожалуйста!

<!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" xml:lang="en"><head>
<meta http-equiv="content-type" content="text/html; charset=windows-1251" />
<title>Vertical center</title>

<style type="text/css">
body {
	color: #000;
	background: #fff;
	font-size: 100%;
	font-family: georgia, times new roman, serif;
	line-height: 1.4;
	height:100%;
	background:url(../images/b.jpg);
}

.wrap1 {
	background:#ccc url(checkb_ff0.gif);
}
/* ie5 mac*/

/**/
.openm {
	display: none;
}
* html .openm, * html .wrap1 {
	display: inline-block;
	vertical-align: middle;
}
* html .wrap1 {
	width: 100%;
}
* html .openm {
	height: 100%;
}
/*ie5 mac*/
* html .openm, * html .wrap1 {
	display: inline;
}
/*/
.openm {
	width: 1px;
	margin-left: -1px;
}
/**/

.wrap1 {
	color: #666;
}
.wrap1 p, .wrap1 ol {
	margin-top: 0;
	margin-bottom: 0;
}
.wrap1 p {
	padding: 0 0.2em;
}

code {
	font-size: 1em;
}
* {
	border-collapse: collapse;  /* Op */
}
.small {
	font-size: .8em;
}

#b {
	width:1024px;
	height:768px;
	background:url(../images/t.jpg);
	background-repeat:no-repeat;
	margin: 0 auto  
}

#k {
	width:246px;
	height:72px;
	margin-top:583px;
	background:url(../images/k.jpg);
	background-repeat:no-repeat;
	float:left;
	font-size:13px;
	font-family:"Times New Roman", Times, serif;
	color:#CCCCCC
}

a { 
	text-decoration:none; 
	color:#CCCCCC
}

#m {
	width:186px;
	height:296px;
	margin-top:359px;
	background:url(../images/m.jpg);
	background-repeat:no-repeat;
	float:right
}

#l {
	margin-left:897px;
	height:113px;
	width:76px;
	background:url(../images/l.jpg);
	background-position: left bottom;
	background-repeat:no-repeat
}
</style>
</head>

<body>

<div class="wrap0"><div class="wrap1">

	<div id="b">
  <div id="l"></div>
  <div id="k"><?php mosLoadModules ( 'k' ); ?></div>
  <div id="m"><?php mosLoadModules ( 'm' ); ?></div>
</div>

</div><div class="openm"></div></div>

<h1> </h1>
</body></html>

ZoNT · May 30, 2008

http://www.webmagazine.biz/code/vertical-a...ntal-centering/

Trust · May 30, 2008

ZoNT, спасибо вам большое. Теперь только осталось убрать горизонтальную прокрутку. Не подскажите как это сделать?

HTML

<?php defined( '_VALID_MOS' ) or die( '?????? ?????????' ); ?>
<!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" lang="<?php echo _LANGUAGE; ?>" 
xml:lang="<?php echo _LANGUAGE; ?>">
<head>
<meta http-equiv="Content-Type" content="text/html; <?php echo _ISO; ?>" />
<?php if ($my->id) { initEditor(); } ?>
<?php mosShowHead(); ?>
<link href="templates/<?php echo $cur_template; ?>/css/css.css" rel="stylesheet" type="text/css" />
/* - */
<!--[if IE ]>
<style type="text/css">
#xcontainer{top:50%}
#xinner{top:-50%;position:relative;}
</style>
<![endif]-->

<!--[if IE 7]>
<style type="text/css">
#xouter{
position:relative;
overflow:hidden;
}
</style>
<![endif]-->
</head>
<body>

<div id="xouter">
	<div id="xcontainer">
		<div id="xinner">

  <div id="l"></div>
  <div id="k"><?php mosLoadModules ( 'k' ); ?></div>
  <div id="m"><?php mosLoadModules ( 'm' ); ?></div>

		</div>
	</div>
</div>

</body>
</html>

CSS

* {margin:0;padding:0}
/* mac hide */
html,body{height:100%;width:100%;}
/* end hide */
body { 
	text-align:center;
	min-height:1024pxpx;/* for good browsers*/
	min-width:768pxpx;/* for good browsers*/
	background:url(../images/b.jpg);
}

#k {
	width:246px;
	height:72px;
	margin-top:583px;
	background:url(../images/k.jpg);
	background-repeat:no-repeat;
	float:left;
	font-size:13px;
	font-family:"Times New Roman", Times, serif;
	color:#CCCCCC
}

a { 
	text-decoration:none; 
	color:#CCCCCC
}

#m {
	width:186px;
	height:296px;
	margin-top:359px;
	background:url(../images/m.jpg);
	background-repeat:no-repeat;
	float:right
}

#l {
	margin-left:897px;
	height:113px;
	width:76px;
	background:url(../images/l.jpg);
	background-position: left bottom;
	background-repeat:no-repeat;
}


#xouter{
	height:100%;
	width:100%;
	display:table;
	vertical-align:middle;
}
#xcontainer {
	text-align: center;
	position:relative;
	vertical-align:middle;
	display:table-cell;
	height: 768px;
}	
#xinner {
	width: 1024px;
	background:#fff;
	height: 768px;
	text-align: center;
	margin-left:auto;
	margin-right:auto;
	border:1px solid #000;
	background:url(../images/t.jpg);
	background-repeat:no-repeat;
}

ZoNT · May 30, 2008

может дело в джумле??? Тут я помочь не могу, так как не вижу, что там джумла наделала...

Trust · May 30, 2008

Zont, это у меня в голове был баг. Я исправил предыдущее сообщение.

ZoNT · May 30, 2008

найди, в каком элементе она добавляется и поставь overflow: hidden;

А мне искать некогда...

vvsh · May 30, 2008

Видишь, люди тут работают...

Sign In

Выравнивание блока по центру относительно body

Question

Link to comment

Share on other sites

22 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information