您现在的位置是:网站首页> 编程资料编程资料
css中margin:0 auto居中问题深入探讨在ie7下css居中样式text-align:center;偏左问题解决方法实例方式学CSS text-align怎么用css margin:0 auto居中CSS中使用text-align、margin:0 auto居中的示例代码
2021-09-07
843人已围观
简介 在CSS中加了margin:0 auto;却没有效果,不能居中的问题;它的本意就是上下边界为0,左右根据宽度自适应!其实就是~~水平居中的意思,接下来为大家介绍下两个典型的错误引起的不能居中的问题
很多初学制作网页的朋友,可能会遇到的一个常见问题,就是在CSS中加了margin:0 auto;却没有效果,不能居中的问题!margin:0 auto;的意思就是:上下边界为0,左右根据宽度自适应!其实就是~~水平居中的意思,呵呵!小一在这里说两个典型的错误引起的不能居中的问题:
1、没有设置宽度
看看上面的代码,根本没有设置DIV的宽度,如何根据宽度自适应呢?新手比较容易忽略的问题!
2、没声明DOCTYPE
①DOCTYPE是document type(文档类型)的简写,在web设计中用来说明你用的XHTML或者HTML是什么版本。要建立符合标准的网页,DOCTYPE声明是必不可少的关键组成部分!
②看看下面的代码,是不是很熟悉?像这样的,在文档最顶端,所有代码之上的乱七八糟的东西,就是用来声明DOCTYPE的!
③你有三种选择,用来声明DOCTYPE
* 过渡的(Transitional):要求非常宽松的DTD,它允许你继续使用HTML4.01的标识(但是要符合xhtml的写法),完整代码如下:
* 严格的(Strict):要求严格的DTD,你不能使用任何表现层的标识和属性,例如
,完整代码如下:
* 框架的(Frameset):专门针对框架页面设计使用的DTD,如果你的页面中包含有框架,需要采用这种DTD,完整代码如下:
④至于选择哪种。。使用过度的就可以了。。
说了半天,margin:0 atuo;不起作用,不能居中的话,看看你的文档最顶端有没有声明DOCTYPE,没有就复制粘贴一下,就可以了!
还有就是 margin:0 auto; 和 margin-left:auto; margin-right:auto;的现实效果有时间还不一样,其原意可能在于设置了margin-top的高度不为0时,会出现意想不到的效果。
1、没有设置宽度
复制代码
代码如下:看看上面的代码,根本没有设置DIV的宽度,如何根据宽度自适应呢?新手比较容易忽略的问题!
2、没声明DOCTYPE
①DOCTYPE是document type(文档类型)的简写,在web设计中用来说明你用的XHTML或者HTML是什么版本。要建立符合标准的网页,DOCTYPE声明是必不可少的关键组成部分!
②看看下面的代码,是不是很熟悉?像这样的,在文档最顶端,所有代码之上的乱七八糟的东西,就是用来声明DOCTYPE的!
复制代码
代码如下:③你有三种选择,用来声明DOCTYPE
* 过渡的(Transitional):要求非常宽松的DTD,它允许你继续使用HTML4.01的标识(但是要符合xhtml的写法),完整代码如下:
复制代码
代码如下:* 严格的(Strict):要求严格的DTD,你不能使用任何表现层的标识和属性,例如
,完整代码如下:
复制代码
代码如下:* 框架的(Frameset):专门针对框架页面设计使用的DTD,如果你的页面中包含有框架,需要采用这种DTD,完整代码如下:
复制代码
代码如下:④至于选择哪种。。使用过度的就可以了。。
说了半天,margin:0 atuo;不起作用,不能居中的话,看看你的文档最顶端有没有声明DOCTYPE,没有就复制粘贴一下,就可以了!
还有就是 margin:0 auto; 和 margin-left:auto; margin-right:auto;的现实效果有时间还不一样,其原意可能在于设置了margin-top的高度不为0时,会出现意想不到的效果。
相关内容
- css不规则图形实现原理及代码CSS Transition通过改变Height实现展开收起元素从QQtabBar看css命名规范BEM的详细介绍css实现两栏布局,左侧固定宽,右侧自适应的多种方法CSS 实现Chrome标签栏的技巧CSS实现两列布局的N种方法CSS实现隐藏搜索框功能(动画正反向序列)CSS3中Animation实现简单的手指点击动画的示例详解CSS中的特指度和层叠问题详解overflow:hidden的作用(溢出隐藏、清除浮动、解决外边距塌陷)关于CSS浮动与取消浮动的问题
- ie兼容性测试不用IE Test依然可以办到浅谈原生页面兼容IE9问题的解决方案新版chrome浏览器设置允许跨域的实现css hack之\9和\0就可能对hack IE11\IE9\IE8无效css区分ie8/ie9/ie10/ie11 chrome firefox的代码解决CSS浏览器兼容性问题的4种方案常见的浏览器兼容性问题(小结)border-radius IE8兼容处理的方法浅谈遇到的几个浏览器兼容性问题base64图片在各种浏览器的兼容性处理 对常见的css属性进行浏览器兼容性总结(推荐)
- css浮动中避免包含元素高度为0的4种解决方法解决子容器全部浮动时父容器高度不能自动撑开的方法纯CSS无hacks的跨游览器自适应高度多列布局 推荐在DIV容器中使用浮动元素的方法CSS教程:div设置float后高度不自动增加-CSS教程-网页制作-网页教学网CSS 清除浮动元素方法 整理浮动层自动适应高度的解决方法Css浮动元素外层容器高度为0(无高度)的解决方法
- 背景半透明效果CSS链接样式代码纯CSS实现背景半透明文字不透明效果兼容IE6css 背景半透明最佳实践css实现背景半透明文字不透明的效果示例
- css3气泡 css3关键帧动画创建的动态通知气泡CSS3中的@keyframes关键帧动画的选择器绑定详解CSS动画属性关键帧keyframes全解析
- css伪类伪元素域高级选择器的介绍详解如何使用CSS3中的结构伪类选择器和伪元素选择器解析CSS中的伪元素及其与伪类的区别详解CSS中的伪类与伪元素及二者间的区别浅谈CSS伪类与伪元素CSS伪类和伪元素的区别详解css3 伪元素和伪类选择器详解CSS伪类/伪元素选择器整理CSS伪类与CSS伪元素的区别及由来具体说明浅谈CSS 伪元素&伪类的妙用
- 什么是@font-face及font-face如何在css中使用深入理解CSS @font-face性能优化CSS3 @font-face属性使用指南CSS3用@font-face实现自定义英文字体CSS @font-face属性实现在网页中嵌入任意字体css常用样式font设置字体的多种变换(实例详解)css中引入指定字体@font-face兼容各浏览器的问题
- Firefox按钮和锚标签上的虚线轮廓删除方法去除在FireFox中点击链接时,出现虚线边框的解决办法去掉a标签和按钮加背景图片虚线/阴影完美解决方案去掉a标签超链接的虚线框的方法css去掉点击连接时所产生的虚线边框技巧兼容符合w3c标准的浏览器隐藏超链接,按钮按下时的虚线方法使用CSS清除按钮和超链接点击时产生的虚线 DIV+CSS实例虚线边框|CSS虚线下划线及虚线用应去掉点击链接时出现的虚线框的几个方法css 网页虚线制作方法剖析纯CSS搞定按钮、链接点击时的虚线
- 用纯css3和html制作泡沫对话框实现代码CSS3软件卸载对话框代码 根据是否卸载出现不同表情CSS实现对话框小尾巴功能纯CSS实现气泡对话框尖角处理方案纯CSS代码实现各类气球泡泡对话框效果css 实现小尖角聊天对话框带尖角的说话泡泡效果
- 设计一个带选择和提示功能的检索框(分步介绍)设置div背景透明的方法示例CSS实现div不设高度完全居中div自适应高度自动填充剩余高度详解DIV+CSS的命名规矩才能有利于SEO优化的实现方法DIV或者DIV里面的图片水平与垂直居中的方法详解如何用div实现自制滚动条div对齐与网页布局详解DIV+CSS实现电台列表设计的示例代码div+css实现带箭头的面包屑导航栏不定宽高的文字在div中垂直居中实现方法