查看完整版本: BOX居中 【1】

齐心 2006-7-27 15:10

BOX居中 【1】

<div style="FLOAT: left;">CODE:</div><div style="FLOAT: right; TEXT-ALIGN: right;"><a class="smalltxt" href="http://bbs.koolou.com/viewthread.php?tid=27&amp;extra=page%3D3#"><font color="#003366">[Copy to clipboard]</font></a></div><div class="altbg2" id="code0" style="CLEAR: both; BORDER-RIGHT: #698cc3 1px solid; PADDING-RIGHT: 10px; BORDER-TOP: #698cc3 1px solid; PADDING-LEFT: 10px; PADDING-BOTTOM: 10px; MARGIN: 3px 2em 2em; BORDER-LEFT: #698cc3 1px solid; WORD-BREAK: break-all; PADDING-TOP: 5px; BORDER-BOTTOM: #698cc3 1px solid;">&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; <br/>&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt; <br/>&lt;head&gt; <br/>&lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt; <br/>&lt;title&gt;PR之窝 - 在线调试代码&lt;/title&gt; <br/>&lt;style type="text/css"&gt; <br/>&lt;!-- <br/>* {font:normal 12px/150% "宋体", Arial, Helvetica, sans-serif;padding:0;margin:0;} <br/>div {width:100%;} <br/>#box {display:table;height:550px;_position:relative;overflow:hidden;} <br/>#box div {_position:absolute;_top:50%;display:table-cell;vertical-align:middle;} <br/>#box div div {width:100%;background:#f7f7f7;display:block;_position:relative;_top:-50%;} <br/>#box div div .bgRed {background:red;height:50px;width:210px;margin:0 auto;} <br/>--&gt; <br/>&lt;/style&gt; <br/>&lt;/head&gt; <br/>&lt;body&gt; <br/>&lt;div id="box"&gt; <br/>&lt;div&gt;&lt;div&gt; <br/>&lt;p class="bgRed"&gt;111&lt;/p&gt; <br/>&lt;/div&gt;&lt;/div&gt; <br/>&lt;/div&gt; <br/>&lt;/body&gt; <br/>&lt;/html&gt;</div><br/>

齐心 2006-7-27 15:10

BOX居中 【2】

<div class="altbg2" id="code0" style="CLEAR: both; BORDER-RIGHT: #698cc3 1px solid; PADDING-RIGHT: 10px; BORDER-TOP: #698cc3 1px solid; PADDING-LEFT: 10px; PADDING-BOTTOM: 10px; MARGIN: 3px 2em 2em; BORDER-LEFT: #698cc3 1px solid; WORD-BREAK: break-all; PADDING-TOP: 5px; BORDER-BOTTOM: #698cc3 1px solid;">&lt;DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; <br/>&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt; <br/>&lt;head&gt; <br/>&lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt; <br/>&lt;title&gt;PR之窝 - 在线调试代码&lt;/title&gt; <br/>&lt;style type="text/css"&gt; <br/>* {font:normal 12px/150% "宋体",Arial;padding:0;margin:0;} <br/>body {margin:0px;} <br/>.box1 {position:absolute;width:500px;height:200px;left:50%;top:50%;margin-top:-100px;margin-left:-250px;background-color:#CCCCFF;} <br/>&lt;/style&gt; <br/>&lt;/head&gt; <br/>&lt;body&gt; <br/>&lt;div class="box1"&gt; <br/>&lt;/div&gt; <br/>&lt;/body&gt; <br/>&lt;/html&gt;</div><br/><br/><div class="smalltxt" style="FONT-WEIGHT: bold; MARGIN-LEFT: 2em;">QUOTE:</div><div class="altbg2" style="BORDER-RIGHT: #698cc3 1px solid; PADDING-RIGHT: 10px; BORDER-TOP: #698cc3 1px solid; PADDING-LEFT: 10px; PADDING-BOTTOM: 10px; MARGIN: 3px 2em 2em; BORDER-LEFT: #698cc3 1px solid; WORD-BREAK: break-all; PADDING-TOP: 10px; BORDER-BOTTOM: #698cc3 1px solid;">/* <br/>IE里用的居中方法是text-align:center;[对象内容文本居中],由于IE里不分文本与BOX[容器],所以该属性把BOX[容器]也给居中了,DIV也属于容器。<br/>但是在FF里,就遵从标准了,所以该属性并不能让BOX[容器]居中,推荐一个使BOX[容器]居中的方法:<br/>&lt;body style="text-align:center;"&gt;<br/>&lt;div style="margin:0 auto;"&gt;margin[外补丁]上下补丁值为0,左右补丁值为自适应。也就是说左右是自动适应浏览器的,所以该对象自身居中了。不过该方法对IE又无效,所以还是要给BODY加上texdt-align:center;。<br/>这也是最常用的方法。&lt;/div&gt;<br/>&lt;/body&gt;<br/>*/</div>

PR_ 2007-3-16 13:34

嘿嘿,给我发现了吧~
页: [1]
查看完整版本: BOX居中 【1】