当前位置：首页 > 资讯 > 计算机/互联网 > 互联网

让 CSS 的 "vertical-align: middle" 属性支持 IE 6/7

时间：2019-01-23 18:46 编辑：2KB 来源：2KB.COM 阅读：398
扫一扫，手机访问

分享
扫描二维码，分享到微信打开微信
使用"扫一扫"
再点击微信界面右上角三个点标志
分享到微信朋友和朋友圈。

摘要： 英文原文：CSS

英文原文：CSS "vertical-align: middle" property for all browsers including IE7 and IE6 本篇文章展现一些能够将目标元素放在父元素的中间例子。第一个例子可以在除IE7以下的所有浏览器中实现，第二个例子虽然看起来有些复杂，但它的一些技巧可以在IE7和IE6中实现。其它翻译版本 (1) 加载中

在这个例子中，类名为valign的div作为父类元素，需要特别注意的是，valign的css属性中的height必须明确设定高度值才能实现内部元素居中。

下面是代码：

<html>
  <head>
    <style type="text/css">
      .valign
      {
         display: table-cell;
         vertical-align: middle;
         height: 200px;
      }
    </style>
  </head>
  <body>
    <div class="valign">
      <p>text text text text text text</p>
      <p>content content content content content</p>
    </div>
  </body>
</html>

第二个例子，在这个例子中，我们运用了更复杂的html和css结构来实现以上目的！

下面是html：

<div class="wrap">
  <div class="valign-center">
    <p>text text text text text text</p>
    <p>content content content content content</p>
  </div>
  <div class="valigh-fix"></div>
</div>

上面html中的css：

<style type="text/css">
  .wrap
  {
    display: table-cell;
    vertical-align: middle;
    width: 100%;
    height: 200px;
  }
  .valigh-fix
  {
    display: none;
    width: 1px;
    margin-left: -1px;
  }
</style>

其它翻译版本 (1) 加载中但是，现在我们需要对IE7和更低版本的添加样式，这些样式必须独立出来因为他们只对IE起作用。为了达到这个效果我们使用了特殊的注释让样式只能在IE下起作用。目前情况下，这个注释告诉IE浏览器当前样式定义只能在IE7或者更低版本下起作用。其它翻译版本 (1) 加载中

这里有个例子:

<!--[if lte IE 7]>
  <style type="text/css">
    .valigh-fix,
    .valign-center
    {
      display: inline-block;
      vertical-align: middle;
    }
    .valign-center
    {
      width: 100%;
    }
    .valigh-fix
    {
      height: 100%;
    }
    .valigh-fix,
    .valign-center
    {
      display: inline;
    }
  </style>
<![endif]-->

演示地址:

在线演示： http://runjs.cn/detail/txhwhdqq 其它翻译版本 (1) 加载中本文中的所有译文仅用于学习和交流目的，转载请务必注明文章译者、出处、和本文链接。 2KB翻译工作遵照 CC 协议，如果我们的工作有侵犯到您的权益，请及时联系我们。

2KB项目（www.2kb.com，源码交易平台）,提供担保交易、源码交易、虚拟商品、在家创业、在线创业、任务交易、网站设计、软件设计、网络兼职、站长交易、域名交易、链接买卖、网站交易、广告买卖、站长培训、建站美工等服务

全部评论(0)

上一篇：写给精明 Java 开辟者的顶级测试技能
下一篇：使用 Countly 来分析 Apple Watch 统计数据

最新发布的资讯信息
【计算机/互联网|】Nginx出现502错误(2020-01-20 21:02)
【计算机/互联网|】网站运营全智能软手V0.1版发布(2020-01-20 12:16)
【计算机/互联网|】淘宝这是怎么了？(2020-01-19 19:15)
【行业动态|】谷歌关闭小米智能摄像头，因为窃听器显示了陌生人家中的照片(2020-01-15 09:42)
【行业动态|】据报道谷歌新闻终止了数字杂志，退还主动订阅(2020-01-15 09:39)
【行业动态|】康佳将OLED电视带到美国与LG和索尼竞争(2020-01-15 09:38)
【行业动态|】2020年最佳AV接收机(2020-01-15 09:35)
【行业动态|】2020年最佳流媒体设备：Roku，Apple TV，Firebar，Chromecast等(2020-01-15 09:31)
【行业动态|】CES 2020预览：更多的流媒体服务和订阅即将到来(2020-01-08 21:41)
【行业动态|】从埃隆·马斯克到杰夫·贝佐斯，这30位人物定义了2010年代(2020-01-01 15:14)

商品推荐
友价商城交易源代码插件-自动生成sitemap插件
￥30.00
百度链接主动推送和熊掌号推送通用版 - 支持任意网站无需插件
￥15.00
2KB网站地图助手/一键生成Sitemap/过滤全站死链/生成全站外链
￥10.00
网站SEO优化分析/死链检测/外链检测/Sitemap生成/抓取分析
￥100.00
YSZI.COM - 新闻自媒体导航平台项目众筹
￥1000.00

资讯排行榜
更多>>