Heim >Web-Frontend >HTML-Tutorial >怎么让这个框居中呢_html/css_WEB-ITnose
怎么让这个框居中呢_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 12:00:271518Durchsuche
怎么让这个框居中呢
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;}
中间要有空格，表示下属关系。
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：HTML的结束标签问题_html/css_WEB-ITnoseNächster Artikel：现在做网站的DOCTYPE用什么？菜鸟求教_html/css_WEB-ITnose