建站软件 优化软件 编程软件 网页辅助 站群程序 网站程序 图像处理 资源教程 字体下载 推荐软件


您的位置:首页 > div+css > 怎么让层居中

怎么让层居中

时间:2015-03-20 09:32:26  来源:免费模板网 作者:风雪 阅读次数 tagscss运用

网页一般都是居中显示,那么怎么让层居中呢?
我们经常想到的可能是div加属性  margin:0 auto

有时候发现这样还是不居中。这个时候可以给层加个宽度试试


 CSS 如何使DIV层水平居中,站长地带碰到很多新手要实现css居中的效果,DIV本身没有定义css居中的属性,

       网上很多的方法都是介绍用上级的text-align: center然后嵌套一层DIV来解决问题.这篇《DIV居中:3种CSS网页布局怎么让DIV居中》就是用来解决css居中问题。当然具体问题具体对待了。

       在Web标准中的页面布局是使用Div配合CSS来实现的。这其中最常用到的就是使整个页面水平居中的效果,这是在页面布局中基本,也是最应该首先掌握的知识。不过,还是经常会有人问到这个问题,在这里我简单总结一下使用Div和CSS实现页面水平居中的方法:

一、margin:0 auto 与 text-aligh:center

在现代浏览器(如Internet Explorer 7、Firefox、Opera等)现代浏览器实现水平居中的方法很简单,只要设定到左右两侧的空白为自动即可。意即:

#wrap { margin:0 auto;}

上面这段代码的意思是说使wrap这个div到左右两侧的距离自动设置,上下为0(可以为任意)。请在现代浏览器(如Internet Explorer 7、Firefox、Opera等)中运行现在的代码: 

 

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> css居中-www.zzarea.com </title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
div#wrap {
width:760px;
margin:0 auto;
border:1px solid #333;
background-color:#ccc;
}
</style>
</head>
<body>
<div id="wrap"> </div>

 


在Firefox等现代浏览器设定页面元素的水平居中,只要指定margin:0 auto;即可
       其中:margin:0 auto; /*这里的0可以任意值*/

上面的css居中效果很好。但是这在Internet Explorer 6及改正的版本中是不起作用的,不过幸好它有自己的解决办法。在Internet Explorer中text-align属性是可继承的,即在父元素中设置后在子元素中就默认具有了该属性。因此我们可以在body标签中设置text- align属性值为center,这样页面内所有的元素都会自动居中,同时我们还要加一个hook把页面中的文字变成我们习惯的阅读方式——居左对齐。因此我们要如此来写代码:

body {text-align:center;}
#wrap {text-align:left;}

这样在Internet Explorer中我们就轻松实现了Div的居中对齐。因此要在所有的浏览器中显示居中的效果,我们就可以这样写我们的代码: 

 

 body { text-align:center; }
#wrap { text-align:left;
margin:0 auto;
}

本文地址:https://www.freemoban.com/bjrm/2015/0320/977.html

猜你喜欢
栏目推荐
模板推荐

Copyright:www.freemoban.com 免费模板网 All Rights Reserved 网站备案:辽ICP备19014872号-2   辽公网安备 21010602000376号  辽公网安备:42900402000182号

免责声明:本站部分资源来自互联网收集,版权归原创者所有,如果侵犯了你的权益,我们会及时删除侵权内容,联系QQ:1615187561 谢谢合作!