![如何用html代码实现网页上下居中?,第1张 如何用html代码实现网页上下居中?,第1张](/aiimages/%E5%A6%82%E4%BD%95%E7%94%A8html%E4%BB%A3%E7%A0%81%E5%AE%9E%E7%8E%B0%E7%BD%91%E9%A1%B5%E4%B8%8A%E4%B8%8B%E5%B1%85%E4%B8%AD%EF%BC%9F.png)
这个问题对很多新手来说都是难以挑战的难度,就是网上有
代码很多人都难以了解。其原理很简单,就是把块级
元素变成行内元素,定义样式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
设置浮动。
首先,先给一个大的div作为父容器.给他设置好宽,高。
父容器设置为position:relative
子容器(想要居中的容器),设置position: absolute 在设置margin-top,margin-right等等,如果想要绝对居中,可设置如下CSS样式。
.Center-Container {
position: relative
}
.Absolute-Center {
width: 50%
height: 50%
overflow: auto
margin: auto 0
position: absolute
}
本问题关键处为,父子容器之间的关系。
5拓展部分:对于HTML5来说,有一种盒模型也可解决问题。简单,易懂。
评论列表(0条)