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. |
译者信息![]() |
First exampleIn 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; 100%; height: 200px; } .valigh-fix { display: none; 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; 100%; height: 200px; } .valigh-fix { display: none; 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. | 译者信息![]() |
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 { 100%; } .valigh-fix { height: 100%; } .valigh-fix, .valign-center { display: inline; } </style> <![endif]--> Here is HTML file with two examples: |
译者信息![]() 这里有个例子: <!--[if lte IE 7]> <style type="text/css"> .valigh-fix, .valign-center { display: inline-block; vertical-align: middle; } .valign-center { 100%; } .valigh-fix { height: 100%; } .valigh-fix, .valign-center { display: inline; } </style> <![endif]--> 演示地址: |
让 CSS 的 "vertical-align: middle" 属性支持 IE 6/7
千里之行,始于足下