Maison >interface Web >tutoriel HTML >怎么让这个框居中呢_html/css_WEB-ITnose
怎么让这个框居中呢_html/css_WEB-ITnose
- WBOYoriginal
- 2016-06-24 12:00:271513parcourir
怎么让这个框居中呢
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 码
nbsp;html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
text
回复讨论(解决方案)
自身的居中是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码
nbsp;html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
text
text
自身的居中是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码
nbsp;html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
text
text
#nav .left{ float:left;width:226px;}
#nav .right{ float:right;width:501px;}
中间要有空格，表示下属关系。
Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：HTML的结束标签问题_html/css_WEB-ITnoseArticle suivant：现在做网站的DOCTYPE用什么？菜鸟求教_html/css_WEB-ITnose