µ
‚?»???‡???µ
µ?±-???‚???°?
?†?‹
‚ ?»?
?‚?° ?±?
?°?
?·?°???»???‡?°?µ?‚?
??
…
°?·???µ???°?…. ?•???»?? ?»?
?‚
??µ?µ?‚ ?·?°???°?
? ?„?
??°?
?
??
‹?
?‚??, ?‚??
?
‚?
µ?
?? ??
µ?±-???°???‚?? ?‚?°?
?
??°?·?°?‚??
µ?»???·??. ?’?µ?±-?
?µ???‚
‚???±???°?¶?°?µ?‚?
??
?µ ?±???°???·?µ???° ??
??¶?µ?‚
·???µ?
?‚??
??
°?·???µ???‹ ?? ?·?°?
??‚??
‚
°???‚?
?µ??
??µ???°?†?
??
?‚?µ???‹, ?‚?
?°
‚?
?°,
??‚?°?
»?µ?
°?·???µ???µ?
?? ?? ?‚.??.
»???·?
?°?
?µ
‹???°?
??°?
??
??·?
?»???µ?‚
?°?‚??
??°?·?°?
?
?±?µ?
??‚?? ??
°?
»?°???°?‚??
»?µ???µ???‚ ??
??°??
?°
»??
? ?µ?
?†?µ???‚?
.
°
µ?‡??
??µ?‚
±
»???·?
?°?
??
»???µ??, ?‚??
»??
‹???°?
??°?
?? ??
°???µ??
°?
?¶?µ?
??
??µ?µ?‚?
µ?
»?
??
??±?
??” ??
‰?
‚???‚?
?, ?‡?µ???µ?·
??·???†?
??°?
?µ, ?° ?‚?°???¶?µ
»???·?
°???°???µ?‚?? align ?‚?µ???° <DIV>.
»???·?
?°?
?µ
‚???‚?
?
?•???»??
??±?°?
?‚??
‚???‚?
??
»?
»?µ???° ??
‰?
°???°???µ?‚???° margin-left, ?‚??
??·???°?»?
??
»?
??µ???‚???‚?
°
??°?·?°?
µ ?·???°?‡?µ?
?µ
?°?
. ?—???°??
»?
, ?µ?
??¶?
??µ???‚???‚?? ?‚?°??, ?‡?‚???±?‹
»?
°?
»?°???°?»?
? ?†?µ???‚?
µ?±-???‚???°?
?†?‹. ?”?»?? ?‡?µ?
‚ 100%,
?‚?°???»?
?‰???…
±?‰?
?‚?
,
°?
‚?
?‚??
»?
??
?†?µ???‚?°?… ??
??»???‡?µ?
µ ?·???°?‡?µ?
?µ
°?·???µ?»???‚??
»?°??. ? ?µ?·???»???‚?°?‚ ?? ?±?
?µ?‚ ?·???°?‡?µ?
?µ??
°???°???µ?‚???° margin-left (
µ?? 1).
µ?? 1.
»???·?
?°?
?µ
°???°???µ?‚???° margin-left
?’?°?»?
‹?? HTML
?’?°?»?
‹?? CSS
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "
http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>?’?‹???°?
??°?
?µ</title>
<style type="text/css">
#centerLayer {
margin-left: 30%; /*
‚???‚?
»?µ???° */
width: 40%; /*
??°
»?
*/
background: #fc0; /* ?¦???µ?‚ ?„?
?° */
padding: 10px;/*
??»??
?‚?µ?
?‚?° */
}
</style>
</head>
<body>
<div id="centerLayer">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
</div>
</body>
</html>
°??
°?
?°???‚,
??¶?
µ
??°?·?‹???°?‚??
, ?°
µ?
?»?
??°?‚?? ?µ?µ ??
‰?
‚???‚?
?°
»?µ???° ??
?°???° (
µ?? 2).
µ?? 2.
»???·?
?°?
?µ
‚???‚?
?
?’?°?»?
‹?? HTML
?’?°?»?
‹?? CSS
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "
http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>?’?‹???°?
??°?
?µ</title>
<style type="text/css">
#centerLayer {
margin-left: 30%; /*
‚???‚?
»?µ???° */
margin-right: 30%; /*
‚???‚?
?°???° */
background: #fc0; /* ?¦???µ?‚ ?„?
?° */
padding: 10px; /*
??»??
?‚?µ?
?‚?° */
}
</style>
</head>
<body>
<div id="centerLayer">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
</div>
</body>
</html>
?’
°?
?
µ???µ
?°?·?°?
°?·???µ?‰?µ?
?µ
»?
?? 40%
? ?†?µ???‚?
.
??‚??
°???°
??°
?°??
°?
??
µ ?·?°???°?µ?‚?
,
??°
?µ???µ?»???µ?‚?
?·???°?‡?µ?
?µ?? ?°?‚?
?±???‚?
margin-left ?? margin-right. ??‚??
°???°???µ?‚???‹
??‚?°???°???»?
?°???‚
‚???‚?
»?µ???° ??
?°???°, ?‡?‚???±?‹
»?
°?
»?°???°?»?
?
µ???µ?
µ,
… ?·???°?‡?µ?
??
??»?¶???‹ ?±?‹?‚??
°?
?‹.
»?µ?
‰?
??± ?±???»?µ?µ
µ?
?°?»?µ?? ??
¶?µ
µ ?·?°?
??‚
‚ ?‚?
??,
°?
?µ ?µ?
??†?‹
·???µ???µ?
??
»???·?
?‚?
»??
??‚?°?
??‹. ?”?»??
‚?
?? ?‚???µ?±???µ?‚?
?·?°???°?‚??
‚???‚?
»?µ???° ??
?°???°
»??
»?
°?
?‹?? auto ?‡?µ???µ?·
‚???»?µ???‹?µ ?°?‚?
?±???‚?‹ margin-left ?? margin-right
»??
µ?
?°?»?
µ
??‚?
margin (
µ?? 3).
µ?? 3.
µ???µ?
?µ ?·???°?‡?µ?
?? auto
?’?°?»?
‹?? HTML
?’?°?»?
‹?? CSS
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "
http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>?’?‹???°?
??°?
?µ</title>
<style type="text/css">
#centerLayer {
width: 400px; /*
??°
»?
??
µ?»?°?… */
margin: 0 auto; /*
‚???‚?
»?µ???° ??
?°???° */
background: #fc0; /* ?¦???µ?‚ ?„?
?° */
padding: 10px; /*
??»??
?‚?µ?
?‚?° */
text-align: left; /* ?’?‹???°?
??°?
?µ
?µ???¶?
»?
? ?»?µ?
?
??°?? */
}
</style>
</head>
<body>
<div id="centerLayer">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
</div>
</body>
</html>
?’
°?
?
µ???µ
??°
»?
??‚?°???°???»?
?°?µ?‚?
400
µ?»?
??
‹???°?
??°?µ?‚?
? ?†?µ???‚?
??
‰?
?·???°?‡?µ?
?? 0 auto
°???°???µ?‚???° margin.
µ?
?‹?? ?°?
??µ???‚
??‚?°???°???»?
?°?µ?‚
??»?µ?
??
‚???‚?
?µ???µ?
??
??µ???…?? ??
?·??
‚
»?
, ?°
‚?
? ?°?
??µ???‚
‹???°?
??°?µ?‚
»?
? ?†?µ???‚?
·?
?‚?°?»??
?° ?±???°???·?µ???°.
°???°???µ?‚?? align ?‚?µ???° <DIV>
?•?‰?µ
??
??±
°?·???µ?‰?µ?
??
? ?†?µ???‚?
?±?‰?µ
µ ?‚???µ?±???µ?‚
»???·?
?°?
??
?°?
?…
‚???»?µ?? ??
?·?°?? ??
°???°???µ?‚?
?? align ?‚?µ???° <DIV>.
??°?·?‹???°?? ?·???°?‡?µ?
?µ center, ?·?°???‚?°???»???µ??
?µ???¶?
µ
»?
‹???°?
??°?‚?
??
? ?µ?
?†?µ???‚?
.
?‚?
??
µ???±?…?
??·???°?‚??
??°
»?
,
??
·
??‚?
?‹?… ?±?
?µ?‚
»???¶???‚??
?‚?µ?
?µ?
??
»??
??,
°??
?°?·?°?
??
µ???µ 4.
µ?? 4.
°???°???µ?‚?? align ?‚?µ???° DIV
?’?°?»?
‹?? HTML
?’?°?»?
‹?? CSS
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "
http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>?’?‹???°?
??°?
?µ</title>
<style type="text/css">
#centerLayer {
width: 400px; /*
??°
»?
??
µ?»?°?… */
background: #fc0; /* ?¦???µ?‚ ?„?
?° */
padding: 10px; /*
??»??
?‚?µ?
?‚?° */
text-align: left; /* ?’?‹???°?
??°?
?µ
? ?»?µ?
?
??°?? */
}
</style>
</head>
<body>
<div align="center">
<div id="centerLayer">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
</div>
</div>
</body>
</html>
?‚?? ?¶?µ,
°?? ?? ??
»???‡?°?µ
»???·?
?°?
??
°???°???µ?‚???° text-align,
°?·???µ?‰?°?‚?
??
? ?†?µ???‚?
?±?
?µ?‚ ?? ?‚?µ?
?‚
?‚?
»?
.
?‚?
??
»?µ?
?µ?‚
°?
?»?
?? ?·?°???°?‚?? ?µ?
µ???±?…?
?µ
‹???°?
??°?
?µ ?‡?µ???µ?·
‚???»??.
»?
-?
‚?µ?
?µ???° ?·?°???°???°?‚??
µ ?‚???µ?±???µ?‚?
,
??° ?±?
?µ?‚
‹?‡?
?»???‚?
?? ?°???‚?
?°?‚???‡?µ?
?? ?? ?·?°?
°?‚??
??µ
?‚?
??µ
‚???°?
?‚?
µ?±-???‚???°?
?†?‹.
±?
?»???‚?
?µ
??·???†?
??°?
?µ
»?
?°?±?
?»???‚?
??
??·???†?
??°?
??
°?‚?‹
»?
‹?‡?
?»?
?‚?
‚?
??‚?µ?»?
?? ?»?µ?
?
µ???…???µ?
??»?°
?°
‚?µ?»?
??
»?µ???µ???‚?°
»?? ?±???°???·?µ???°, ?µ???»??
‚?µ?»??
µ?‚.
»?
, ?·?°???°?
?‹?? ?? ?°?±?
?»???‚???‹??
??·???†?
??°?
?µ??,
??¶?µ?‚
°?
»?°???°?‚?
??
?‹?? ?‚?µ?
?‚?
»??,
°???±?
‚,
?µ???…
µ?
.
??»???¶?µ?
?µ
?µ???µ?»???µ?‚?
??
‰?
‚???»?µ?
? ?°?‚?
?±???‚?° z-index ??
??·?
?»???µ?‚
??±?
?°???»???‚??
??»???¶?µ?
?µ??
»?
?
??»?
z-?
??.
°?
??
??±?
?±?
‹?
??‚??
°
µ?±-???‚???°?
?†?µ
°?·?»???‡???‹?µ
??°?·?
,
?»?‹???°???‰???µ
?°,
µ???»?°?
»??
»?°???°???‰???µ
µ?
.
?’???°?‡?°?»?µ
»?µ?
?µ?‚
??°?·?°?‚??
??
‹?
?‚??
»?
??
‰?
°???°???µ?‚?
?? width ?? height. ? ?°?·???µ???‹
??¶?
?·?°???°???°?‚?? ??
µ?»?°?…,
?†?µ???‚?°?…
»??
??… ?µ?
??†?°?….
,
°?
??µ??,
??¶?
?µ???µ?»???‚?? ??
?†?µ???‚?°?…, ?°
‹?
?‚?? ??
µ?»?°?….
·-?·?°
‚?
?±?µ?
??‚??
??µ???»?°???°?µ???‹??
µ?‚?
°?·???µ?‰?µ?
??
? ?†?µ???‚?
??»???µ?‚?
°???±???»?µ?µ
µ?
?°?»?
?‹??.
»?µ?
‰?
°?? ??” ?·?°???°?µ?? ?°?±?
?»???‚?
?µ
??·???†?
??°?
?µ
»?
?‡?µ???µ?· ?°?
??µ???‚ position: absolute.
??»???¶?µ?
?µ
»?
»?µ?
?µ?‚
?µ???µ?»???‚??
°?? 50%
?
·?
?‚?°?»?? ??
µ???‚?
?°?»?? ??
‰?
??‚?? left ?? top. ??‚?? ?·???°?‡?µ?
??
??‚?°???‚?
µ???·???µ?
?‹?
,
µ?·?°?
??
‚
»???·???µ???‹?… ?µ?
??†
·???µ???µ?
??.
°??
°??
°?‚?‹
»?
?µ???µ?»?
?‚?
‚ ?µ?
?»?µ?
?
µ???…???µ?
??»?°,
»?? ?‚???‡?
?
‹???°?
??°?
??
»?µ?
?µ?‚
??±?°?
?‚??
°???°???µ?‚???‹ margin-left ?? margin-top ??
‚?
?†?°?‚?µ?»?
?‹?
?·???°?‡?µ?
.
…
µ?»???‡?
?°
??»?¶???° ?±?‹?‚??
°?
?°
??»?
??µ
??‹
»?
(
»?? margin-left) ??
‹?
?‚?‹ (
»?? margin-top).
?§?‚???±?‹
‹?
?‚?°
»?
µ
µ?
?»?°?
·-?·?° ?µ?
?‚?µ???‚?°,
??»???‡?µ??
°???°???µ?‚?? overflow: auto,
?
??±?°???»???µ?‚
??»?
?‹
?‚?
, ?µ???»?? ??
??…
??·?
??µ?‚
??¶???°,
‹?
?‚?°
‚?
??‚?°?µ?‚?
µ???·???µ?
? (
µ?? 5).
µ?? 5.
??°
»?
??
µ?»?°?…
?’?°?»?
‹?? HTML
?’?°?»?
‹?? CSS
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "
http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>?’?‹???°?
??°?
?µ</title>
<style type="text/css">
#centerLayer {
position: absolute; /*
±?
?»???‚?
?µ
??·???†?
??°?
?µ */
width: 400px; /*
??°
»?
??
µ?»?°?… */
height: 300px; /* ?’?‹?
?‚?°
»?
??
µ?»?°?… */
left: 50%; /*
??»???¶?µ?
?µ
»?
‚ ?»?µ?
?
??°?? */
top: 50%; /*
??»???¶?µ?
?µ
»?
‚
µ???…???µ?
??°?? */
margin-left: -200px; /*
‚???‚?
»?µ???° */
margin-top: -150px; /*
‚???‚?
??µ???…?? */
background: #fc0; /* ?¦???µ?‚ ?„?
?° */
border: solid 1px black; /*
°???°???µ?‚???‹
°?
??
*/
padding: 10px; /*
??»??
?‚?µ?
?‚?° */
overflow: auto; /* ?”???±?°???»?µ?
?µ
??»?
?‹
?‚?
*/
}
</style>
</head>
<body>
<div id="centerLayer">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
</div>
</body>
</html>
?’
»???‡?°?µ
»???·?
?°?
??
?†?µ???‚?
?? ?·?°?
?
‚???»??
µ?
?µ?‚?
µ?·???°?‡???‚?µ?»?
??,
°?
?‚?°?? ?¶?µ
?µ?»???‚??
??
‹?
?‚??
»?°?? ??
??±?°?
?‚??
??»???‡?µ?
?‹?µ ?·???°?‡?µ?
?? ??
°?‡?µ???‚???µ ?°?
??µ???‚?
??
??‚???°?? margin-left ?? margin-top (
µ?? 6).
µ?? 6.
??°
»?
??
?†?µ???‚?°?…
?’?°?»?
‹?? HTML
?’?°?»?
‹?? CSS
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "
http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>?’?‹???°?
??°?
?µ</title>
<style type="text/css">
#centerLayer {
position: absolute; /*
±?
?»???‚?
?µ
??·???†?
??°?
?µ */
width: 40%; /*
??°
»?
??
?†?µ???‚?°?… */
height: 30%; /* ?’?‹?
?‚?°
»?
??
?†?µ???‚?°?… */
left: 50%; /*
??»???¶?µ?
?µ
»?
‚ ?»?µ?
?
??°?? */
top: 50%; /*
??»???¶?µ?
?µ
»?
‚
µ???…???µ?
??°?? */
margin-left: -20%; /*
‚???‚?
»?µ???° */
margin-top: -15%; /*
‚???‚?
??µ???…?? */
}
</style>
</head>
<body>
<div id="centerLayer">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
</div>
</body>
</html>
??° ??
‹?
?‚?°
»?
°?
??
?·?°???° ??
‚???‚?
?°?
»?µ???° ??
??µ???…??, ?µ???»?? ?‚???µ?±???µ?‚?
??‚?°?
??‚?? ?·???°?‡?µ?
?µ
·
°???°???µ?‚?
?? ??
?†?µ???‚?°?…,
?‚???µ?‚???‚???µ?
??,
?µ?
?µ?‚?
?? ?·?°?
?
??
°???°???µ?‚???°.
°??
?°?·?°?
??
°?
?
µ???µ,
??°
»?
??‚?°?
»?µ???° ?? 40%,
»?µ?
°?‚?µ?»?
??, ??
»??
??‚???° margin-left ?‚?°???¶?µ
°?
µ?
?‚??
?†?µ???‚?‹, ??
°?
?
»???‡?°?µ, 20%.
??°?·?°?
?°??
?±?µ?
??‚??
??·?
?»???µ?‚
µ?
?‚?? ?»???±?‹?µ ?µ?
??†?‹
·???µ???µ?
??, ?°
µ
?°?
?‡?
?°?‚?
?? ?‚???»?
??
? ?„?
?·?°?
?, ?‡?‚??
µ?»?°?µ?‚
?…?
‰?
??°???‚???‡?µ?
??
»??
??µ?…
»???‡?°?µ??.
??‚???‡?
??
http://www.htmlbook.ru/content/?id=95
