search

Home >Web Front-end >HTML Tutorial >How to center this box_html/css_WEB-ITnose

How to center this box_html/css_WEB-ITnose

WBOY
WBOYOriginal
2016-06-24 12:00:271515browse

怎么让这个框居中呢
css码

@charset "utf-8";
/* CSS Document */

html{height:100%;border:none;}
body{height:100%;border:none;padding:0;margin:0;text-align:center;font-size:14px;color:#000;background-color:#FFF;}
div,ul,li,img{margin:0;padding:0;border:none;}
ul{list-style-type:none;}
table,input{font-size:12px;}
a:link{ color:#09F; text-decoration:none;  }
a:visited{ color:#09F; text-decoration:none;  }
a:hover{ color:#09F; text-decoration:none;  }
a:active{ color:#09F; text-decoration:none;  }

.mass{width:1024px;}
.center{text-align:center;}
.clear{ clear:both;visibility:hidden;font-size:0px;}
.border{ border:#F00 solid 1px;}



html 码
b585974ae3b7dba3039af53a9593f9c4
383eb734b02b508089ba2d78eb4c6f68
93f0f5c25f18dab9d176bd4f6de5d30e
0f3eabac747cdf61a51589c5584ae6e8
b2386ffb911b14667cb8f0f91ea547a7无标题文档6e916e0f7d1e588d4f442bf645aedb2f
293aea2b488a984ee965f30400653712
9c3bca370b5104690d9ef395f2c5f8d1

6c04bd5ca3fcae76e30b72ad730ca86d
44682f1a0893e975886d83bde0105cf9text16b28748ea4df4d9c2150843fecfba68
36cc49f0c466276486e50c850b7e4956
73a6ac4ed44ffec12cee46588e518a5e


回复讨论(解决方案)

自身的居中是margin:0 auto; 
demo here 

<!doctype html><html><head>    <meta charset="UTF-8">    <title></title>    <style type="text/css">        html{height:100%;border:none;}        body{height:100%;border:none;padding:0;margin:0;text-align:center;font-size:14px;color:#000;background-color:#FFF;}        div,ul,li,img{margin:0;padding:0;border:none;}        ul{list-style-type:none;}        table,input{font-size:12px;}        a:link{ color:#09F; text-decoration:none;  }        a:visited{ color:#09F; text-decoration:none;  }        a:hover{ color:#09F; text-decoration:none;  }        a:active{ color:#09F; text-decoration:none;  }        .mass{width:1024px;margin: 0 auto;}        .center{text-align:center;}        .clear{ clear:both;visibility:hidden;font-size:0px;}        .border{ border:#F00 solid 1px;}    </style></head><body><div class="border mass">text</div></body></html>

自身的居中是margin:0 auto; 
demo here 

<!doctype html><html><head>    <meta charset="UTF-8">    <title></title>    <style type="text/css">        html{height:100%;border:none;}        body{height:100%;border:none;padding:0;margin:0;text-align:center;font-size:14px;color:#000;background-color:#FFF;}        div,ul,li,img{margin:0;padding:0;border:none;}        ul{list-style-type:none;}        table,input{font-size:12px;}        a:link{ color:#09F; text-decoration:none;  }        a:visited{ color:#09F; text-decoration:none;  }        a:hover{ color:#09F; text-decoration:none;  }        a:active{ color:#09F; text-decoration:none;  }        .mass{width:1024px;margin: 0 auto;}        .center{text-align:center;}        .clear{ clear:both;visibility:hidden;font-size:0px;}        .border{ border:#F00 solid 1px;}    </style></head><body><div class="border mass">text</div></body></html>



这个左漂 右漂怎么不起作用？

css码

@charset "utf-8";
/* CSS Document */

html{height:100%;border:none;}
body{height:100%;border:none;padding:0;margin:0;text-align:center;font-size:14px;color:#000;background-color:#FFF;}
div,ul,li,img{margin:0;padding:0;border:none;}
ul{list-style-type:none;}
table,input{font-size:12px;}
a:link{ color:#09F; text-decoration:none;  }
a:visited{ color:#09F; text-decoration:none;  }
a:hover{ color:#09F; text-decoration:none;  }
a:active{ color:#09F; text-decoration:none;  }

.mass{width:1024px;margin: 0px auto}
.center{text-align:center;}
.clear{ clear:both;visibility:hidden;font-size:0px;}
.border{ border:#F00 solid 1px;}


#nav{}
#nav.left{ float:left;width:226px;}
#nav.right{ float:right;width:501px;}

html码

b585974ae3b7dba3039af53a9593f9c4
383eb734b02b508089ba2d78eb4c6f68
93f0f5c25f18dab9d176bd4f6de5d30e
0f3eabac747cdf61a51589c5584ae6e8
b2386ffb911b14667cb8f0f91ea547a7无标题文档6e916e0f7d1e588d4f442bf645aedb2f
293aea2b488a984ee965f30400653712
9c3bca370b5104690d9ef395f2c5f8d1

6c04bd5ca3fcae76e30b72ad730ca86d
44682f1a0893e975886d83bde0105cf9
e884342cdf9156d36799ee58b27ee8fb
    1201755a16c17bb0d9ea502d4723f8f2text16b28748ea4df4d9c2150843fecfba68
449a3f648c0a9150d90826a379b1bfd9text16b28748ea4df4d9c2150843fecfba68
16b28748ea4df4d9c2150843fecfba68




16b28748ea4df4d9c2150843fecfba68
36cc49f0c466276486e50c850b7e4956
73a6ac4ed44ffec12cee46588e518a5e




The centering of itself is margin: 0 auto;
demo here 

<!doctype html><html><head>    <meta charset="UTF-8">    <title></title>    <style type="text/css">        html{height:100%;border:none;}        body{height:100%;border:none;padding:0;margin:0;text-align:center;font-size:14px;color:#000;background-color:#FFF;}        div,ul,li,img{margin:0;padding:0;border:none;}        ul{list-style-type:none;}        table,input{font-size:12px;}        a:link{ color:#09F; text-decoration:none;  }        a:visited{ color:#09F; text-decoration:none;  }        a:hover{ color:#09F; text-decoration:none;  }        a:active{ color:#09F; text-decoration:none;  }        .mass{width:1024px;margin: 0 auto;}        .center{text-align:center;}        .clear{ clear:both;visibility:hidden;font-size:0px;}        .border{ border:#F00 solid 1px;}    </style></head><body><div class="border mass">text</div></body></html>



Why doesn’t this left and right drift work?

css code

@charset "utf-8";
/* CSS Document */

html{height:100%;border:none;}
body{height:100%;border:none;padding:0;margin:0;text-align:center;font-size:14px;color:#000;background-color:#FFF;}
div ,ul,li,img{margin:0;padding:0;border:none;}
ul{list-style-type:none;}
table,input{font-size:12px;}
a:link{ color:#09F; text-decoration:none; }
a:visited{ color:#09F; text-decoration:none; }
a:hover{ color:#09F; text- decoration:none; }
a:active{ color:#09F; text-decoration:none; }

.mass{width:1024px;margin: 0px auto}
.center{text- align:center;}
.clear{ clear:both;visibility:hidden;font-size:0px;}
.border{ border:#F00 solid 1px;}


# nav{}
#nav.left{ float:left;width:226px;}
#nav.right{ float:right;width:501px;}

html code

82e4865872727f41d1edae4f463247d6
68ccb177a5de0ef9542dde7d35bae727
93f0f5c25f18dab9d176bd4f6de5d30e
5d4fd62a4f58da8b666a698127081f22
b2386ffb911b14667cb8f0f91ea547a7Untitled Document6e916e0f7d1e588d4f442bf645aedb2f
a7e39fa90c0cfa6d2f211d9b1f993374
9c3bca370b5104690d9ef395f2c5f8d1

6c04bd5ca3fcae76e30b72ad730ca86d
7836a780ce7a1109f865062997102686
eb545d6e9e25f5c0174408f6286375ad
0408d29daeaa1cd46a8559e557760641text16b28748ea4df4d9c2150843fecfba68
2599c84ca173ba4c479313ffa3421831text16b28748ea4df4d9c2150843fecfba68
16b28748ea4df4d9c2150843fecfba68




16b28748ea4df4d9c2150843fecfba68
36cc49f0c466276486e50c850b7e4956
73a6ac4ed44ffec12cee46588e518a5e




#nav . left{ float:left;width:226px;}
#nav .right{ float:right;width:501px;}
There should be a space in the middle to indicate the subordinate relationship.
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：HTML closing tag problem_html/css_WEB-ITnoseNext article：HTML closing tag problem_html/css_WEB-ITnose

Related articles

See more