<head>
<meta charset="UTF-8">
<title>我的第一个 HTML 页面</title>
</head>
<body>
<div style="display: blockmargin: 0 autowidth: 50%background: #ccc">
<p>body 元素的内容会显示在浏览器中。</p>
<p>title 元素的内容会显示在浏览器的标题栏中。</p>
<p>居中显示</p>
</div>
</body>
</html>先给所有的元素外面
加个div
然后给这个div定义
宽度,左右margin为auto,就行了
div居中可以用外边距margin属性来实现。
1、新建html文档,在body标签中添加div标签,标签的id为“header”,这时因为div标签中没有内容且没有设置样式,所以网页中显示空白:
2、这时为div标签设置原题中的css样式,此时虽然div盒子显示了,但是没有居中:
3、此时为div添加一个“margin: 0 auto”属性就会居中显示,“margin”指的是div标签的外边距,“0”指的是div标签上下的外边距,“auto”指的是div标签左右的外边距,并且会根据浏览器窗口大小自动居中,这时就是完整的html和css代码:
先将整个网页整体定义一个div,如果是用table做的,就先定义table,然后设定好这个div或者table的宽,一般都是1003或者980、960等,接着最关键的,定义body的样式如下:<body align="center">将body内的内容居中,把刚才定义的那个网页整体的div或者table样式设定如下<div align="left" width="980">将div宽度设定好,又将其里面的内容左对齐,这样就可以达到网页居中的效果了。看不懂?给你贴个具体样式吧。<body align="center">
<div width="980" align="left">
content
</div>
</body>
content就是网页的具体内容。980只是一个数值,表示网页的宽度,可以自己设。
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)