如何用html代码实现网页上下居中？_随笔

这个问题对很多新手来说都是难以挑战的难度，就是网上有代码很多人都难以了解。其原理很简单，就是把块级元素变成行内元素，定义样式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

html中让表格在浏览器中左右居中，可以设置表格的align属性

align有三个属性：

1、居中：center；

2、靠左：left；

3、靠右：right。

html中是没办法实现上下居中的，如果设置上下居中，需要通过js程序来设置。

左右居中代码如下：

<!DOCTYPE html PUBLIC "-//W3C//<a href="https://www.baidu.com/s?wd=DTD&tn=44039180_cpr&fenlei=mv6quAkxTZn0IZRqIHckPjm4nH00T1d9mWwWuWR4rHbzmyDYnjbY0ZwV5Hcvrjm3rH6sPfKWUMw85HfYnjn4nH6sgvPsT6KdThsqpZwYTjCEQLGCpyw9Uz4Bmy-bIi4WUvYETgN-TLwGUv3En1R4PH0LnjTv" target="_blank" class="baidu-highlight">DTD</a>XHTML 1.0 <a href="https://www.baidu.com/s?wd=Tr&tn=44039180_cpr&fenlei=mv6quAkxTZn0IZRqIHckPjm4nH00T1d9mWwWuWR4rHbzmyDYnjbY0ZwV5Hcvrjm3rH6sPfKWUMw85HfYnjn4nH6sgvPsT6KdThsqpZwYTjCEQLGCpyw9Uz4Bmy-bIi4WUvYETgN-TLwGUv3En1R4PH0LnjTv" target="_blank" class="baidu-highlight">Tr</a>ansitional//EN" "http://www.w3.org/<a href="https://www.baidu.com/s?wd=TR&tn=44039180_cpr&fenlei=mv6quAkxTZn0IZRqIHckPjm4nH00T1d9mWwWuWR4rHbzmyDYnjbY0ZwV5Hcvrjm3rH6sPfKWUMw85HfYnjn4nH6sgvPsT6KdThsqpZwYTjCEQLGCpyw9Uz4Bmy-bIi4WUvYETgN-TLwGUv3En1R4PH0LnjTv" target="_blank" class="baidu-highlight">TR</a>/xhtml1/<a href="https://www.baidu.com/s?wd=DTD&tn=44039180_cpr&fenlei=mv6quAkxTZn0IZRqIHckPjm4nH00T1d9mWwWuWR4rHbzmyDYnjbY0ZwV5Hcvrjm3rH6sPfKWUMw85HfYnjn4nH6sgvPsT6KdThsqpZwYTjCEQLGCpyw9Uz4Bmy-bIi4WUvYETgN-TLwGUv3En1R4PH0LnjTv" target="_blank" class="baidu-highlight">DTD</a>/xhtml1-<a href="https://www.baidu.com/s?wd=tr&tn=44039180_cpr&fenlei=mv6quAkxTZn0IZRqIHckPjm4nH00T1d9mWwWuWR4rHbzmyDYnjbY0ZwV5Hcvrjm3rH6sPfKWUMw85HfYnjn4nH6sgvPsT6KdThsqpZwYTjCEQLGCpyw9Uz4Bmy-bIi4WUvYETgN-TLwGUv3En1R4PH0LnjTv" target="_blank" class="baidu-highlight">tr</a>ansitional.<a href="https://www.baidu.com/s?wd=dtd&tn=44039180_cpr&fenlei=mv6quAkxTZn0IZRqIHckPjm4nH00T1d9mWwWuWR4rHbzmyDYnjbY0ZwV5Hcvrjm3rH6sPfKWUMw85HfYnjn4nH6sgvPsT6KdThsqpZwYTjCEQLGCpyw9Uz4Bmy-bIi4WUvYETgN-TLwGUv3En1R4PH0LnjTv" target="_blank" class="baidu-highlight">dtd</a>">

<head>

<title>无标题文档</title>

</head>

<body>

</tr>

</tr>

</table>

</body>

</html>

在表格外面嵌套另一个高度为 100% 的表格，外层的表格设置 td 的 valign 属性为 middle

<table><tr><td>sdfsdfsf</td></tr></table>

</td></tr></table>

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

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

如何用html代码实现网页上下居中？

发表评论

评论列表（0条）