先来没有任何对齐时的样子：

1、一种是在父级没有高度的情况下居中。

给每个独立的元素都加上vertical-align:middle;

针对文字可以不加，加与不加都可以居中对齐。但是无法做到绝对的居中对齐。可以忽略此处了。

2、在父级有高度的情况下居中。

在高级浏览器中默认给父级来个line-height=父级已知高度，即可。

在ie6无效。

在ie6中：

现象一：（有文字混排的情况下）

解决办法：给每个元素都变成BFC，让其居中对齐即可。这里包括文字。

例：vertical-align: middle; display: inline; zoom:1;

现象二：（没有文字混排的情况下）在ie6用现象一的方法不能达到居中。

解决方法：选定一个清楚知道高度的元素，margin:/* (父级所属line-height - 自身img,input,select,object高度)/2px 0 */;

所有元素都vertical-align: middle;

在有文字混排的情况下用现象二的方法也可以解决现象一的bug。

<!DOCTYPE html>

<html>

<head>

  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

  <title>ie6对齐测试</title>

</head>

<body>

  <div style="height:40px; padding:40px;">

<style type="text/css">

*{padding:0; margin:0;}

.testLn2{/*line-height: 60px; height:60px;*/ background: red; margin-bottom: 20px; height: 60px; line-height: 60px;}

/*.testLn2 span{vertical-align: middle;}*/

.testLn2 .me{display: inline; zoom:1; height: 40px; vertical-align: middle; margin:10px 0; }

.testLn2 .me2{ vertical-align: middle; /*display: inline; zoom:1;*/}

.testLn2 .me7{ vertical-align: middle; display: inline; zoom:1;}

.testLn2 .me8{display: inline; zoom:1; height: 40px; vertical-align: middle;}

.testLn2 .me6{display: inline; zoom:1; height: 30px; vertical-align: middle; margin:15px 0; }

.testLn3{background: red; margin-bottom: 20px; height: 60px; line-height: 60px; }

.testLn4{background: red; margin-bottom: 20px; height: 60px;}

</style>

          <div class="testLn3">

            <span>请输入验证码：</span>

            <input type="text" class="me" style="width:80px;" />

            <input type="button" class="me2" value="gwgeg" />

            <select class="me2"><option>gsdgdsgsg</option></select>

            <input type="radio" class="me2" /><input type="checkbox" class="me2" />

          </div>

          <div class="testLn4">

            <span class="me7">请输入验证码：</span>

            <input type="text" class="me" style="width:80px;" />

            <input type="button" class="me7" value="gwgeg" />

            <select class="me7"><option>gsdgdsgsg</option></select>

            <input type="radio" class="me7" /><input type="checkbox" class="me2" />

          </div>

          <div class="testLn2">

            <span class="me7">请输入验证码：</span>

            <input type="text" class="me8" style="width:80px;" />

            <input type="button" class="me7" value="gwgeg" />

            <select class="me7"><option>gsdgdsgsg</option></select>

            <input type="radio" class="me7" /><input type="checkbox" class="me2" />

          </div>

          <div class="testLn2">

            <!-- <span class="me7">请输入验证码：</span> -->

            <input type="text" class="me8" style="width:80px;" />

            <input type="button" class="me7" value="gwgeg" />

            <select class="me7"><option>gsdgdsgsg</option></select>

            <input type="radio" class="me7" /><input type="checkbox" class="me2" />

          </div>

          <div class="testLn2">

            <span>请输入验证码：</span>

            <input type="text" class="me" style="width:80px;" />

            <input type="button" class="me2 me6" value="gwgeg" />

            <select class="me2"><option>gsdgdsgsg</option></select>

            <input type="radio" class="me2" /><input type="checkbox" class="me2" />

          </div>

          <div class="testLn2">

            <!-- <span>请输入验证码：</span> -->

            <input type="button" class="me2" value="gwgeg" />

            <input type="text" class="me2" style="width:80px;" />

            <input type="button" class="me2 me6" value="gwgeg" />

            <select class="me2"><option>gsdgdsgsg</option></select>

            <input type="radio" class="me2" /><input type="checkbox" class="me2" />

          </div>

          <div class="testLn2">

            <span class="me2">请输入验证码：</span>

            <input type="text" class="me2" style="width:80px;" />

            <input type="button" class="me2 me6" value="gwgeg" />

            <select class="me2"><option>gsdgdsgsg</option></select>

            <input type="radio" class="me2" /><input type="checkbox" class="me2" />

          </div>

    </div>

</body>

</html>

参考地址：http://www.aiubug.com/?p=491

各种能考虑到的现象都在例子中，以后实际项目可以根据此例子实际应对。

修改了下已有的项目，附上ie6下的效果图：

ps：想说的很多，实际写的很少，慢慢沉淀吧。就酱紫。

关于ie6对齐的更多相关文章

  1. 兼容ie6的ul水平居中对齐

    ---恢复内容开始--- margin可以为负数左移动. padding不可以. ---恢复内容结束---

  2. label和input里面文字不对齐的解决方法！

    测试了集中方法,发现不行.只能用专署标签解决这个问题. <fieldset>    <legend>神光咨询后台管理登录</legend>    <br /& ...

  3. 关于 IE6、 IE7兼容性总结（转）

    其实浏览器的不兼容,我们往往是各个浏览器对于一些标准的定义不一致导致的,因此,我们可以进行一些初始化,很多问题都很轻松解决. 下面是14条特殊情况仅供参考: 1. 文字本身的大小不兼容.同样是font ...

  4. 微信浏览器是移动端的IE6?微信升级内核后Html5和CSS3兼容性总结

    今年4月,自从微信浏览器X5 升级Blink内核之后,各前端社区一片高潮,仿佛看到了前端er,眼含热泪进而抱头痛头的说:终于可以不用兼容这"移动端的IE6 "了,可以早点回家了!! ...

  5. 让ie6对png透明图片支持起来

    [声明:此文仅是对低版本ie使用透明图片的一个研究,当时出于工作要求,所以花费了一番心思在兼容旧版本ie上,现在对ie8都是做降级处理了.不培养用户坏习惯.引导用户跟随潮流体验新技术应是我们前端开发者 ...

  6. [转]CSS 表单元素对齐详解

    来源:http://blog.sina.com.cn/s/blog_655388ed0100lzyk.html 简单的设置input{vertical-align:middle}即可,完美的: lab ...

  7. IE6 7下常见CSS兼容性处理

    以下是一些比较常见的IE6 7下的兼容性问题. 在当下这个时代,其实我们几乎可以不用再去针对IE6做兼容性的处理,除非你的公司还是诡异的要求你兼容到IE6.但是了解一些常见的兼容性问题还是可以帮助我们 ...

  8. [CSS]复选框单选框与文字对齐问题的研究与解决.

    前言:今天碰到的这个问题, 恰好找到一个很好的博文, 在这里转载过来 学习下. 原文地址:复选框单选框与文字对齐问题的研究与解决. 目前中文网站上面的文字,就我的个人感觉而言,绝大多数网站的主流文字大 ...

  9. 小tips: 使用&#x3000;等空格实现最小成本中文对齐

    一.重见天日第二春 11年的时候,写了篇文章“web页面相关的一些常见可用字符介绍”,这篇文章里面藏了个好东西,就是使用一些空格实现个数不等的中文对齐或等宽.见下表: 字符以及HTML实体 描述以及说 ...

随机推荐

  1. SqlBulkCopy批量写入25万条数据只需3s

    Microsoft SQL Server 提供一个称为 bcp 的流行的命令提示符实用工具,用于将数据从一个表移动到另一个表(表既可以在同一个服务器上,也可以在不同服务器上).SqlBulkCopy  ...

  2. CodeForces 173B Chamber of Secrets 二分图+最短路

    题目链接: http://codeforces.com/problemset/problem/173/B 题意: 给你一个n*m的地图,现在有一束激光从左上角往左边射出,每遇到‘#’,你可以选择光线往 ...

  3. 【HDOJ】【4089】Activation

    概率DP kuangbin总结中的第5题 题解copy: HDU 4098 题意:有n个人排队等着在官网上激活游戏.Tomato排在第m个. 对于队列中的第一个人.有一下情况: 1.激活失败,留在队列 ...

  4. Recommender Systems移动互联网个性化游戏推荐

    对于在线商店,主要关心两方面:1. 提升转化率(将不消费的用户转变为消费用户):2. 提升消费额(已经花钱的人,花更多的强). 对比了6种方法:1. 协同过滤:2. slope one:3. 基于内容 ...

  5. uva 10269 最短路

    求两次最短路 #include <cstdio> #include <cstdlib> #include <cmath> #include <map> ...

  6. list 去掉重复的值

    去除List列表中重复值(3种解决方法)public static void main(String[] args) { String[] ar = { "dd", "c ...

  7. 分享: 利用Readability解决网页正文提取问题

    原文:http://www.cnblogs.com/iamzyf/p/3529740.html 做数据抓取和分析的各位亲们, 有没有遇到下面的难题呢? - 如何从各式各样的网页中提取正文!? 虽然可以 ...

  8. FreePlan Windows下默认乱码解决方案

    FreePlan 做为一个开源的跨平台的思维导图软件非常好用. 笔者最近在Windows下使用时发现,新建导图文件时默认总是乱码,每次新建元素都需要手动设置一下字体才行. 研究一下,估计是默认模板问题 ...

  9. UVA 11174 Stand in a Line (组合+除法的求模)

    题意:村子里有n个人,给出父亲和儿子的关系,有多少种方式可以把他们排成一列,使得没人会排在他父亲的前面 思路:设f[i]表示以i为根的子树有f[i]种排法,节点i的各个子树的根节点,即它的儿子为c1, ...

  10. 在UWSGI和NGINX配合的情况下，配置个别目录上传及超时

    笨办法就是多加一个LOCATION. 然后,自定义以下类似参数 client_max_body_size uwsgi_connect_timeout uwsgi_read_timeout server ...