页面无法居中的原因

网页制作:margin:0 auto;无法居中解决方法

很多初学制作网页的朋友,可能会遇到的一个常见问题,就是在CSS中加了margin:0 auto;却没有效果,不能居中的问题!margin:0 auto;的意思就是:上下边界为0,左右根据宽度自适应!其实就是~~水平居中的意思,呵呵!小一在这里说两个典型的错误引起的不能居中的问题:

1、没有设置宽度
<div style="margin:0 auto;"></div>
看看上面的代码,根本没有设置DIV的宽度,如何根据宽度自适应呢?新手比较容易忽略的问题!

2、没声明DOCTYPE
①DOCTYPE是document type(文档类型)的简写,在web设计中用来说明你用的XHTML或者HTML是什么版本。要建立符合标准的网页,DOCTYPE声明是必不可少的关键组成部分!

②看看下面的代码,是不是很熟悉?像这样的,在文档最顶端,所有代码之上的乱七八糟的东西,就是用来声明DOCTYPE的!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

③你有三种选择,用来声明DOCTYPE
* 过渡的(Transitional):要求非常宽松的DTD,它允许你继续使用HTML4.01的标识(但是要符合xhtml的写法),完整代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

* 严格的(Strict):要求严格的DTD,你不能使用任何表现层的标识和属性,例如<br>,完整代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

* 框架的(Frameset):专门针对框架页面设计使用的DTD,如果你的页面中包含有框架,需要采用这种DTD,完整代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

④至于选择哪种。。使用过度的就可以了。。

说了半天,margin:0 atuo;不起作用,不能居中的话,看看你的文档最顶端有没有声明DOCTYPE,没有就复制粘贴一下,就可以了!

转自:

http://www.86kx.com/html/wlzy/20100320/6227.html

时间: 2024-10-29 19:08:48

页面无法居中的原因的相关文章

移动页面div居中效果代码

在线查看效果:http://hovertree.com/texiao/mobile/4.htm 可用手机浏览器查看 以下为HTML文件: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <meta name="viewport" content=

页面元素居中的几种方法

1前言 做页面布局时,经常会需要将一些页面元素居中显示.当然,你可以设定元素的top.left来使它居中,但是,当父容器的大小发生变化,你不得不修改子元素的top.left来使它保持居中:当用户的显示器分辨率与你的测试机不同,可能会导致界面乱成一片,所以不管从代码的易维护性的角度还是从对不同分辨率显示器的适应性方面来说,这种设置固定值的方法显然是比较拙劣的.因此,做页面布局,应尽量减少使用固定值的布局方式.下面介绍几种页元素居中的方法. 1Div居中 1.1左右居中 在父窗口中设置text-al

页面文本居中问题

大家在网站建设中都会遇到整个页面文本居中的问题,有的人会说直接用margin:0 auto;不就可以了么!但是这只能设置一个元素的居中,如果想要整个页面居中,就必须设置所有元素居中,这样会很麻烦! 下面给大家提供一个方法: 这个方法可以兼容IE,火狐等浏览器,如果单单设置body不设置center的话,会出现IE不兼容的现象,大家可以试试!! 此文章属于王业楼的个人博客原创,若要转载请注明出处:王业楼的个人博客 www.ly89.cn

php页面显示乱码的原因

刚开始学习Php的时候,大部分同学是不是会发现自己做的php页面显示乱码呢?我的开发环境是Apache+mysql+Dreamweaver分别安装的,没有使用集成环境. 总结我的学习经验,我归类出了以下乱码的原因: 1>.请确认你的php环境是否搭建成功,测试可以使用只有<?php phpinfo(); ?>代码的php文件放于默认端口文件下访问localhost:port/filename.php方式访问,如何配置php开发环境请参考百度资料 2>.查看屏幕右下方Apache服务

Tomcat manager页面 403的真正原因及解决办法

版本:Tomcat 8.5.8 问题:新安装的tomcat,用其他机器访问tomcat的Server Status.Manager App.Host Manager三个页面均显示403(本机访问没有问题),conf/tomcat-users.xml里已添加配置: <role rolename="manager-gui"/> <role rolename="admin-gui"/> <user username="tomcat&

一篇关于商品数据查询在页面不显示的原因

1.商品在页面拿不到数据 2.原因 数据库中把数据导入solr后再次更新数据的时候,还是原来的数据,页面都没有变化 3.解决方案 删除solr里面的数据,然后再次导入数据到solr里面,刷新页面,最后成功了 4.总结:认真分析思路,考虑问题要全面 原文地址:https://www.cnblogs.com/itboxue/p/10740801.html

让easyui的window在页面中居中显示

RT $('#zzqhylbView').window("resize",{top:$(document).scrollTop() + ($(window).height()-250) * 0.5});//居中显示

SSH项目开发中,将jsp页面放在WEB-INF的原因解析

 在一些安全型要求比较高的项目开发中,我们经常看到jsp页面都被放在WEB-INF下面了.这是出于对安全性的考虑, 是为了代码的安全.这样实现起来虽然麻烦了点,而且页面跳转很不方便.但是整个项目的安全性就提高上去了!所 以还是建议在一些安全性要求比较高的项目里使用这种做法! 这是我写的一个例子,我就是将所有的JSP页面都放在WEB-INF下面,然后按照模块进行分配,course文件夹就是放和 课程信息管理相关的JSP页面.假如我们输入https://localhost:8080/项目名称/p

将CSS放头部,JS放底部,可以提高页面的性能的原因

css不阻止dom的解析 js阻止dom的解析 css js都会阻止dom的渲染 原因: js有可能影响dom的解析,比如在js里面新增dom等这些操作 css不能影响dom的解析 而 dom的渲染 是需要等js,css都解析完成后才进行的(浏览器就是这么机智),所以css js都阻止dom的渲染