CSS中怎么让DIV居中亲自实验得出的结论


CSS 如何使DIV层水平居中
今天用CSS碰到个很棘手的问题,DIV本身没有定义自己居中的属性,
网上很多的方法都是介绍用上级的text-align: center然后嵌套一层DIV来解决问题.
可是事实上这样的方法科学吗?
经过网络搜索和亲自实验得出以下结论:
正确的也是对页面构造没有影响的设置如下:
对需要水平居中的DIV层添加以下属性:

复制代码
代码如下:

margin-left: auto;
margin-right: auto;

经过这么一番设置问题似乎解决了,在FF中已经居中了,可是在IE中看竟然还是没有居中!
郁闷了一下午,就是找不出问题所在,还特地比较了网上的文章竟然一模一样.
问题到底出在哪里呢?
感谢网友乐天无用帮忙找出了这个邪门问题的原因.
原来是L-Blog默认没有在HTML前加上DTD,于是IE就以HTML而不是XHTML来解释文档.
问题并不在CSS而在XHTML网页本身.
需要加上这样的代码才能使得上述设置有效果:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

如果您希望更为严格的XHTML 1.0 Strict或者XHTML 1.1请查阅相关文档.
以上测试均基于Windows XP SP2版IE6和FireFox 1.0最终版.

如何使DIV居中

主要的样式定义如下:

复制代码
代码如下:

body {TEXT-ALIGN: center;}
#center { MARGIN-RIGHT: auto; MARGIN-LEFT: auto; }

说明:
首先在父级元素定义TEXT-ALIGN: center;这个的意思就是在父级元素内的内容居中;对于IE这样设定就已经可以了。但在mozilla中不能居中。解决办法就是在子元素定义时候设定时再加上“MARGIN-RIGHT: auto;MARGIN-LEFT: auto; ”
需要说明的是,如果你想用这个方法使整个页面要居中,建议不要套在一个DIV里,你可以依次拆出多个div,只
要在每个拆出的div里定义MARGIN-RIGHT: auto;MARGIN-LEFT: auto; 就可以了。

如何使图片在DIV 中垂直居中,用背景的方法。举例:
body{BACKGROUND: url(http://www.w3cn.org/style/001/logo_w3cn_194x79.gif) #FFF no-repeat center;}

关键就是最后的center,这个参数定义图片的位置。还可以写成“top left”(左上角)或者"bottom right"等,也可以直接写数值"50 30"

如何使文本在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控制页面中元素垂直居中代码 全局和区域垂直居中

复制代码
代码如下:

<style type="text/css" media=screen>
body
{
text-align: center;
}
#a
{
width: 200px;
height: 400px;
background: #000;
}
#b
{
margin-top: expression((a.clientHeight-50)/2);
width: 50px;
height: 50px;
background: #FFF;
}
#c
{
position: absolute;
left: expression((body.clientWidth-50)/2);
top: expression((body.clientHeight-50)/2);
width: 50px;
height: 50px;
background: #F00;
}
</style>
<div id="a">
<div id="b"></div>
</div>
<div id="c"></div>

另一方法:

复制代码
代码如下:

<div style="background:blue;position:absolute;left:expression((body.clientWidth-50)/2);top:expression((body.clientHeight-50)/2);width:50;height:50"></div>



相关阅读:
javascript实现在指定元素中垂直水平居中
分享Visual Studio原生开发的10个调试技巧(2)
C#画笔Pen用法实例
jQuery的each循环用法简单示例
CodeIgniter 完美解决URL含有中文字符串
Win10安装打印机驱动出现错误代码0xc000007b的原因及解决方法
java针对电话号码正则匹配实例
JavaScrip常见的一些算法总结
借助javascript代码判断网页是静态还是伪静态
在CentOS上安装Percona服务器的方法
基于javascript实现全国省市二级联动下拉选择菜单
DIV多层嵌套margin-top的BUG问题
java中常用工具类之字符串操作类和MD5加密解密类
详解Java编程中线程的挂起、恢复和终止的方法
快速导航
PHP MySQL HTML CSS JavaScript MSSQL AJAX .NET JSP Linux Mac ASP 服务器 SQL jQuery C# C++ java Android IOS oracle MongoDB SQLite wamp 交通频道 作文范文 武威-江油 太原南-旬阳北 重庆-邓州 济南-子洲 莒南-徐州 库车-墨玉 烟台-新县 重庆南-朱杨溪 东莞-廉江 荆州-重庆北 深圳北-温岭 太平川-本溪 桐城-丹凤 鄯善-乌鲁木齐南 太阳升-辽阳 平原-昌黎 苏州园区-福州南 正定机场-洛阳龙门 大东-柳河 杨村-阳高 白城-遂宁 武义-济南 盘锦北-绍兴北 平安驿-吉安 哈密-任丘 东富-山河屯 平顶山西-汉中 晏城-亚布力 子洲-柳林南 海石湾-无锡 凤县-新乡 灌水-石城 阿乌尼-汇流河 孝感-哈尔滨西 定边-平原 漯河-项城 公主岭-商都 兴城-定州 梁山-商丘 娄底-南通 汾阳-绥中 三明北-醴陵东 江山-宜昌东 镇江-灵宝 蓬安-贵溪 向塘-万源 珠海北-碧江 六枝-徐水 桦南-朱家沟 五莲-芜湖 砀山-晋城 襄阳-武威 水家湖-绩溪北 磁窑-葫芦岛 宜昌东-玉山 寒葱沟-开原 哈力图-海城 原林-朝中 李家-沈阳北 兴城-麻城 任丘-绥德 浠水-甘谷 来宾-聊城 长兴南-泊头 上海-济南 北京南-池州 长春-常州北 杭州东-六盘水 永州-海宁 长河碥-荣昌 双城堡-霸州 向塘-兰考 乐清-南靖 向塘-蚌埠 纪家沟-四分地 新乡-张家口南 许昌-忻州 蔡家坡-清水 贵阳北-常州北 昆明-镇远 从杭州到上海浦东机场怎么坐车赶11:25的灰机
湖州新车站到广电大厦
苏州列车火车站到盘门路83-3的公交路线
武昌火车列车站到机场怎么走
问一下路怎么坐车
2009年江西有几条高速公路开工和通车
我要从湖南新省政府去株洲芦淞区董家塅开车怎么坐车啊
成都到江苏火车列车站时刻表
中和镇(音)菜市场在哪个地方(越详细越好)?从温江出发,
吉首火车列车站可以打电话订火车列车票迈
青岛市四方区洛阳路到青岛六中坐几路车
金华西到千岛湖汽车要多久?
无锡到所有南京溧水、高淳双牌石的时间与价钱,分别从哪个战出发
从镇江列车火车站到渡口要多久啊?还有,渡口早上7 8点有去扬州的黑
淮北的手机到阜阳用长途加漫游怎么办
苏州工业园区独生子女证到哪里办理,老公苏州户口,我户口沭
山西运城到山东泰安多少公里?
请问汉川是今?
从安徽滁州定远到安徽阜阳 怎么走
我的驾驶证是在珠海考的现在想迁移到广州来 请问在广州可以直
从临汾到郑州的汽车多少钱什么时候有
重庆—徐州火车列车票
从上海青浦区寄信到北京朝阳区要贴邮票多少
绍兴到宁波自驾高速过路费要多少
从青岛到银川,怎么坐车最实惠,最方便,最快捷
河南商丘市民权县到什么地方办合作医疗??
从北京西站到大兴区看守所怎么坐车
江西省赣州市到广西省河池市怎么走!
问有日照跑合肥的汽车吗
成都七中嘉祥外国语至龙泉乘公交车怎么坐车

Copyright © 2016 phpStudy |