本文主要包含DIV居中等相关知识,佚名 希望在学习及工作中可以帮助到您
CSS 如何使DIV层水平居中
今天用CSS碰到个很棘手的问题,DIV本身没有定义自己居中的属性, 网上很多的方法都是介绍用上级的text-align: center然后嵌套一层DIV来解决问题.
可是事实上这样的方法科学吗?
经过网络搜索和亲自实验得出以下结论:
正确的也是对页面构造没有影响的设置如下:
对需要水平居中的DIV层添加以下属性:
<html> <head> <style> body{TEXT-ALIGN: center;} #center{ MARGIN-RIGHT: auto; MARGIN-LEFT: auto; height:200px; background:#F00; width:400px; vertical-align:middle; line-height:200px; } </style> </head> <body > <div id="center"><p>test content</p></div> </body> </html>
提示：您可以先修改部分代码再运行
说明：
vertical-align:middle;表示行内垂直居中，我们将行距增加到和整个DIV一样高line-height:200px;然后插入文字，就垂直居中了。
CSS+DIV控制页面中元素垂直居中代码 全局和区域垂直居中
解释：这个方法以前只是知道，但一次一个朋友问我方法的原理，那时我没有答上来，前几天看了一文章后才突然明白了它的原理！以前我的理解是先左边界-370px,然后是想position问题，所以始终想不通。其实我们可以反过一想先定位后边界，这样就很容易理解了。position:absolute;它是对浏览器定位的，left:50%;正好在中间的位置上，也就是这个DIV块左边界上处于游览器的中间位置，在加入样式margin-left:-370px,这个370是算出来的，它恰好是div740的一半，我们让DIV往回走370，这样DIV的中线与浏览器的中线重合所以看到的DIV总是在中间的！这个方法也有一个缺点就是如是你
今天用CSS碰到个很棘手的问题,DIV本身没有定义自己居中的属性, 网上很多的方法都是介绍用上级的text-align: center然后嵌套一层DIV来解决问题.
可是事实上这样的方法科学吗?
经过网络搜索和亲自实验得出以下结论:
正确的也是对页面构造没有影响的设置如下:
对需要水平居中的DIV层添加以下属性:
<html> <head> <style> body{TEXT-ALIGN: center;} #center{ MARGIN-RIGHT: auto; MARGIN-LEFT: auto; height:200px; background:#F00; width:400px; vertical-align:middle; line-height:200px; } </style> </head> <body > <div id="center"><p>test content</p></div> </body> </html>
提示：您可以先修改部分代码再运行
说明：
vertical-align:middle;表示行内垂直居中，我们将行距增加到和整个DIV一样高line-height:200px;然后插入文字，就垂直居中了。
CSS+DIV控制页面中元素垂直居中代码 全局和区域垂直居中
解释：这个方法以前只是知道，但一次一个朋友问我方法的原理，那时我没有答上来，前几天看了一文章后才突然明白了它的原理！以前我的理解是先左边界-370px,然后是想position问题，所以始终想不通。其实我们可以反过一想先定位后边界，这样就很容易理解了。position:absolute;它是对浏览器定位的，left:50%;正好在中间的位置上，也就是这个DIV块左边界上处于游览器的中间位置，在加入样式margin-left:-370px,这个370是算出来的，它恰好是div740的一半，我们让DIV往回走370，这样DIV的中线与浏览器的中线重合所以看到的DIV总是在中间的！这个方法也有一个缺点就是如是你