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

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. Discuz!NT3.6与网站整合（操作用户信息）解决方案

    因为网站要加个论坛,所以就用到了Discuz!NT3.6. 可惜目前官方论坛已经关闭,只有3.6版本的有源码,3.9的没有源码,不好操作,下载地址: http://download.comsenz.c ...

  2. oracle 删除用户，表空间；循环删除表

    select * from dba_tablespaces 说明:查看所有表空间 ----------------------------------------------------------- ...

  3. 如何在Eclipse中配置Tomcat服务器

    之前使用MyEclipse来开发Web应用,可以在MyEclipse中配置服务器,配置完后,直接运行服务器即可,很方便. 最近切换到Eclipse开发环境,发现使用Tomcat的方式不太一样,因此在此 ...

  4. [转载]DirectoryEntry配置IIS7出现ADSI Error：未知错误(0x80005000)

    一.错误情况 环境:win7+iis7.0 DirectoryEntry配置IIS7出现如下错误 或者是 下面一段代码在IIS6.0下运转正常,但IIS7.0下运转会出错: System.Direct ...

  5. 高性能网络编程1----accept建立连接

    转 http://taohui.org.cn/tcpperf1.html  陶辉 taohui.org.cn 回到应用层,往往只需要调用类似于accept的API就可以建立TCP连接.建立连接的流程大 ...

  6. oracle 笔记

    1.Oracle认证,与其它数据库比较,安装 Oracle安装会自动的生成sys用户和system用户: (1)sys用户是超级用户,具有最高权限,具有sysdba角色,有create databas ...

  7. log4j记录exception异常有价值信息及log4j级别

    try{ }catch(Exception e){ e.printStackTrace(); log.error("配件导出excel错误:", e.fillInStackTrac ...

  8. Nginx配置一个自签名的SSL证书

    http://www.liaoxuefeng.com/article/0014189023237367e8d42829de24b6eaf893ca47df4fb5e000 要保证Web浏览器到服务器的 ...

  9. Lua print on the same line

    In Pascal, I have write and writeln. Apparently Lua's print is similar to writeln of Pascal. Do we h ...

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

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