html中如何让一整个网页居中?_随笔

<html>

<head>

<title>我的第一个 HTML 页面</title>

</head>

<body>

<p>body 元素的内容会显示在浏览器中。</p>

<p>title 元素的内容会显示在浏览器的标题栏中。</p>

</div>

</body>

</html>先给所有的元素外面

加个div

然后给这个div定义

宽度，左右margin为auto,就行了

先将整个网页整体定义一个div，如果是用table做的，就先定义table，然后设定好这个div或者table的宽，一般都是1003或者980、960等，接着最关键的，定义body的样式如下：<body align="center">将body内的内容居中，把刚才定义的那个网页整体的div或者table样式设定如下<div align="left" width="980">将div宽度设定好，又将其里面的内容左对齐，这样就可以达到网页居中的效果了。看不懂？给你贴个具体样式吧。

content

</div>

</body>

content就是网页的具体内容。980只是一个数值，表示网页的宽度，可以自己设。

这个问题对很多新手来说都是难以挑战的难度，就是网上有代码很多人都难以了解。其原理很简单，就是把块级元素变成行内元素，定义样式vertical-align:middle，让其垂直居中。这里面有两个难点，1、怎样把块级元素变成行内元素并可以定义大小，而且还要兼容（要了解IElayout）。2、如何用好vertical-align:middle，vertical-align:middle用在表格上很见效，谁都可以用，用在行内元素怎样才能起作用呢等等。\x0d\x0a代码我写给你，你自己去琢磨\x0d\x0a\x0d\x0a.box{display:inline-block}\x0d\x0a.box{*display:inline*zoom:1width:50pxheight:80pxborder:#000 1px solidvertical-align:middle}\x0d\x0ai{display:inline-blockwidth:0height:100%vertical-align:middle}\x0d\x0a\x0d\x0a\x0d\x0a\x0d\x0a\x0d\x0a\x0d\x0a \x0d\x0a afdafd\x0d\x0a

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/zaji/6243937.html

html中如何让一整个网页居中?

发表评论

评论列表（0条）