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

Here are the examples how to place the elements in the middle of the parent element. The first example works in all new browsers except Internet Explorer of version 7 and less. The second one looks more difficult, but it has some tricky fixes which make it workable in IE7 and IE6.

译者信息

本篇文章展现一些能够将目标元素放在父元素的中间例子。第一个例子可以在除IE7以下的所有浏览器中实现，第二个例子虽然看起来有些复杂，但它的一些技巧可以在IE7和IE6中实现。

First example

In this example is used the tag "div" with the class "valign". But, pay your special attention on that the CSS property "height" must be defined for the parent element, in our case it is the tag "div" with the class "valign".

Here is code:

<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>

译者信息

在这个例子中，类名为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>

Second example

In this example we use more difficult structure of HTML and CSS which is shown below.

Here is 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>

CSS for current example:

<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>

译者信息

第二个例子，在这个例子中，我们运用了更复杂的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>

But, now we need to add CSS styles for Internet Explorer of version 7 and less. These styles have to be separated because they must affect only on Internet Explorer. To make it we need to put styles into the special conditional comments which work only in Internet Explorer. And in the current case this conditional comment tells to Internet Explorer that the content of this conditional comment will work only in versions 7 and less.

译者信息

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

Here is the example of this:

<!--[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]-->

Here is HTML file with two examples:

在线演示： http://runjs.cn/detail/txhwhdqq

译者信息

这里有个例子:

<!--[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

时间： 2024-08-29 10:47:03

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

First example

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

[ css 补充 vertical-align ] css中补充的vertical-align属性讲解

CSS(2)---css字体、文本样式属性

CSS和JavaScript标签style属性对照表

css超出一行添加省略号属性:text-overflow和white-space

css字体样式(Font Style),属性

[转]图解CSS的padding,margin,border属性(详细介绍及举例说明)

CSS多列、用户界面属性

使用jquery获取css的top和left属性

Css3之基础-3 Css 尺寸单位、尺寸属性与边框属性