CSS "vertical-align: middle" property for all browsers including IE7 and IE6
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 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>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>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
{
width: 100%;
}
.valigh-fix
{
height: 100%;
}
.valigh-fix,
.valign-center
{
display: inline;
}
</style>
<![endif]-->Here is HTML file with two examples:
