首頁 > web前端 > html教學 > 怎么让这个框居中呢_html/css_WEB-ITnose

怎么让这个框居中呢_html/css_WEB-ITnose

WBOY
發布: 2016-06-24 12:00:27
原創
1504 人瀏覽過

怎么让这个框居中呢
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码





无标题文档

















自身的居中是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;}
中间要有空格,表示下属关系。
相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板