IE6水平居中兼容办法

最新推荐文章于 2021-06-09 11:06:29 发布
最新推荐文章于 2021-06-09 11:06:29 发布
阅读量572 收藏
点赞数
分类专栏： 前端问题 文章标签： 前端 css ie6 浏览器
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/chenzihan3417/article/details/44086103
版权
<body>
    <div class="wrapper"></div>
</body>
针对以上dom结构，所有现代浏览器水平居中代码：
 .wrapper{
    width:920px;
    margin:0 auto;
}

IE6要实现水平居中，需要加上部分hack代码：
body{
    text-align:center;
}
.wrapper{
    width:920px;
    margin:0 auto;
    text-align:left; 
}

原因是：IE将text-align误解为让所有东西居中，而不只是文本

Mmzer
关注
专栏目录
css实现div水平、垂直居中兼容chrome、ie8
09-25
`属性值对于块级元素的水平居中非常有效，它设置上下边距为0，左右边距自动，使得元素能够居中。 第三种方法使用了CSS的`box-sizing`属性来包含内边距和边框的宽度，与前两个方法相似，都是通过设置`position: ...
div+css布局限制图片最大宽度图片水平垂直居中兼容IE6
11-24
总结起来，要实现“div+css布局限制图片最大宽度图片水平垂直居中兼容IE6”，我们需要结合使用`max-width`属性限制图片宽度，通过`text-align`和内联块级元素实现水平居中，以及利用`vertical-align`和负`margin`...
IE6 div 居中
希望不是无解
03-03 152
width:***px;margin:0 auto; 在IE6无法达到居中效果 1.body(或父元素){ text-align:center } 2.嵌套
图文-水平垂直居中兼容ie6+
abn1808的博客
12-02 111
图文-水平垂直居中兼容ie6+具体代码： <!DOCTYPE html><html><head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>图文-水平垂直居中 兼容ie6+&...
水平垂直居中图片及文字(兼容IE6+)
z514987467的专栏
05-09 196
简介： 如何使用css让不固定宽高的div水平垂直居中呢？这个问题似乎有很多解决办法，尝试了网上的最简单且兼容低版本浏览器的方法，但发现存在一些小问题，所以写此文章留存。 1、水平居中 1.1、父容器container添加css属性text-align:center; 子容器center添加css属性display:inline-block; 1.2、代码如下：
ie6绝对居中彻底解决
wyzxzws的专栏
12-04 152
代码： css .center { position: fixed; *position: fixed; _position: absolute; display: block; width: 700px; min-height: 80px; z-index: 998; background-color: #f...
DIV以及图片水平垂直居中兼容多种浏览器
09-22
`实现水平居中： ```css #testdiv { margin: 0 auto; border: 1px solid red; height: 400px; width: 400px; } ``` ### 第三种：最简单适用的全兼容方法 这种方法结合了绝对定位和转换（`transform`）属性，...
IE6 div最小高度去除方法以及IE6div垂直居中css样式
12-13
在CSS布局中，垂直居中往往比水平居中更具挑战性，尤其是在不支持CSS Flexbox的老版本浏览器中。一种常见的方法是使用绝对定位和负边距。以下是一个例子： HTML部分： ```html <div id="loginbox"></div> ``` CSS...
不定宽高div水平垂直居中(兼容ie6)
禅林阆苑
05-10 2627
不定宽高div水平垂直居中(兼容ie6)不定宽高div水平垂直居中解决方法有很多，JS是最能够确保各种浏览器中一致性的，但是仍然可以使用CSS的方式来解决。1. 水平居中   margin:0 auto; 是最常用的让DIV容器居中的方法。margin作用于块级元素，而是否作用于其他内联元素因浏览器不同而不同，此处可能为内联元素，所以避免使用。   text-align:center; 可以让绝大
实现ie6下的居中
weixin_30485379的博客
07-29 73
代码如下所示，转自http://w3help.org/zh-cn/causes/RT8003 对于 text-align 的讨论。 <div style="width:200px; border:1px solid black; text-align:center;"> <div style="width:100px; height:100px; backgroun...
图片垂直居中（兼容IE6/7）
weixin_33995481的博客
03-09 197
我们知道单行文字垂直居中时只用让height=line-height即可,那么图片以及多行文字是如何垂直居中的呢？现以如下图片和代码为例，将我搜集得到的方法做一个总结说明： html代码： <div class="box"> <img src="images/baymax.jpg"> </div> css代码： ...
兼容ie6的ul水平居中对齐
weixin_30456039的博客
09-14 81
---恢复内容开始--- margin可以为负数左移动。 padding不可以. ---恢复内容结束--- 转载于:https://www.cnblogs.com/sweetXiaoma/p/5872959.html
纯css实现DIV水平垂直居中显示（兼容IE6）
tangxinzhuan
10-29 1301
&lt;html&gt; &lt;head&gt; &lt;style&gt; .box { width: 300px; height: 200px; background: green; position: absolute;; to...
兼容ie8的元素居中
qq_40285497的博客
07-03 1584
今天重新回来修改一下弹窗居中这个功能；弹窗，就是将一个框框放在屏幕中间，这个框的高度不确定。 不需要兼容ie8及以下，css用下面这个代码完全够了 .pop{ position: fixed; left: 0; top: 0; width: 100%; height: 100%; } .pop-content{ position: absolu...
ie html自动居中,DIV在IE中无法居中怎么解决？
weixin_36018183的博客
06-09 339
DIV是层叠样式表中的定位技术，全称DIVision，即为划分。有时可以称其为图层。 DIV元素是用来为HTML(标准通用标记语言下的一个应用)文档内大块(block-level)的内容提供结构和背景的元素。div水平居中介绍：让最外层DIV在IE浏览器中水平居中，除了对其设置margin:0 auto外，一般还要对body设置样式，但一般高版本IE浏览器无须设置此CSS样式也能使DIV居中，低版...
IE6.0刷新才居中的问题！
guocong0603的专栏
03-16 386
这种问题是由于相对点导致的！解决办法就是： 在body里面加上：position:relative;
关于IE6中无法使用margin:0 auto居中的问题解决方案
http://itzones.cn
03-02 996
添加 css语句margin:0 auto 就可以实现页面居中效果，但是当我们在不同的浏览器中测试的时候会发现IE6中居然不居中。又一个该死的ie6 bug。网络上流传的一个解决办法是，给我们想要居中的对象设置text-align:center。杯具啊！为了解决一个小问题，引入所有文本对齐重新设置的大麻烦。更可笑的是这种解决方法竟然被引用数次。今天，提供正确的IE6下margin auto不居中解
css水平居中兼容ie
最新发布
12-09
要在CSS中实现水平居中，可以使用以下两种方法来兼容IE： 1. 使用text-align:center属性将文本居中对齐，但是需要将该属性应用于父元素而不是要居中的元素本身。例如： ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> .parent { text-align: center; } .child { display: inline-block; } </style> </head> <body> <div class="parent"> <div class="child">这是要居中的元素</div> </div> </body> </html> ``` 2. 使用position和margin属性将元素居中对齐。例如： ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> .parent { position: relative; } .child { position: absolute; left: 50%; transform: translateX(-50%); } </style> </head> <body> <div class="parent"> <div class="child">这是要居中的元素</div> </div> </body> </html> ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值