怎么让这个框居中呢_html/css_WEB-ITnose-html教程-PHP中文网

首页

web前端

html教程

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 pm 12:00 PM

居中

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

自身的居中是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>

text

#nav .left{ float:left;width:226px;}
#nav .right{ float:right;width:501px;}
中间要有空格，表示下属关系。

声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

HTML和代码：仔细观察术语Apr 10, 2025 am 09:28 AM

htmlisaspecifictypefodyfocusedonstructuringwebcontent，而“代码” badlyLyCludEslanguagesLikeLikejavascriptandPytyPythonForFunctionality.1）htmldefineswebpagertuctureduseTags.2）“代码”代码“ code” code code code codeSpassSesseseseseseseseAwiderRangeLangeLangeforLageforLogageforLogicIctInterract

HTML，CSS和JavaScript：Web开发人员的基本工具Apr 09, 2025 am 12:12 AM

HTML、CSS和JavaScript是Web开发的三大支柱。1.HTML定义网页结构，使用标签如、等。2.CSS控制网页样式，使用选择器和属性如color、font-size等。3.JavaScript实现动态效果和交互，通过事件监听和DOM操作。

HTML，CSS和JavaScript的角色：核心职责Apr 08, 2025 pm 07:05 PM

HTML定义网页结构，CSS负责样式和布局，JavaScript赋予动态交互。三者在网页开发中各司其职，共同构建丰富多彩的网站。

HTML容易为初学者学习吗？Apr 07, 2025 am 12:11 AM

HTML适合初学者学习，因为它简单易学且能快速看到成果。1)HTML的学习曲线平缓，易于上手。2)只需掌握基本标签即可开始创建网页。3)灵活性高，可与CSS和JavaScript结合使用。4)丰富的学习资源和现代工具支持学习过程。

HTML中起始标签的示例是什么？Apr 06, 2025 am 12:04 AM

AnexampleOfAstartingTaginHtmlis，beginSaparagraph.startingTagSareEssentialInhtmlastheyInitiateEllements，defiteTheeTheErtypes，andarecrucialforsstructuringwebpages wepages webpages andConstructingthedom。