Home / Articles / Programming languages / Markup languages / HTML & CSS / CSS "vertical-align: middle" property for all browsers including IE7 and IE6

CSS "vertical-align: middle" property for all browsers including IE7 and IE6

CSS "vertical-align: middle" property for all browsers including IE7 and IE6
 
  • Currently 5 out of 5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5
Rating: 5/5 (1 votes cast)

Thank you for rating!

You have already rated this page, you can only rate it once!

Your rating has been changed, thanks for rating!

Log in or create a user account to rate this page.


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:

HTML Examples index.html 2.46 kB

 

Read also

Conditional comments for IE

Conditional comments for IE

hasLayout in Internet Explorer

hasLayout in Internet Explorer

Details about "float" property

Details about "float" property

How to write in HTML

How to write in HTML

Discussion (total 6 comments)

ergusto
June 06, 2013 at 06:19 am
And what if you can't set an explicit height value for any of the elements, such as when using a responsive design?
Administrator User
Administrator User
June 06, 2013 at 12:31 pm
Then this solution won't work. I have never faced with such cases as yours, I will try to find other solution, If I find it I will write new article about it.
Scott Davis
August 01, 2013 at 12:58 pm
This is the first solution I've seen for vertical align that works for IE6 that allows for semantic layout without using actual table layout (IE6 doesn't support display: table-cell).

Please don't tell me to stop supporting IE6, that is not at issue (It is still IATA standard for airport KIOSKS).

Since I'm ONLY supporing IE6, I've tried to combine the two styles that control the display
.valign-fix,  .valign-center {
	display: inline-block;
	vertical-align: middle;
}
 .valign-fix, .valign-center {
	display: inline;
}
into a single statement, but doesn't seem to work and I don't understand why.
.valign-fix,  .valign-center {
	display: inline-block;
	vertical-align: middle;
	display: inline;
}

doesn't work.
.valign-fix,  .valign-center {
	/*display: inline-block;*/
	vertical-align: middle;
	display: inline;
}
doesn't work

Thank you for sharing this!
Administrator User
Administrator User
August 02, 2013 at 07:36 am
CSS display: inline-block doesn't work in IE6 and IE7. But, we can imitate its behaviour by some trick: hasLayout + display: inline which produce the same result as CSS display: inline-block in other browsers.

So, CSS property height activates hasLayout in IE, you can read about it here: http://basicuse.net/articles/pl/textile/html_css/haslayout_in_internet_explorer

Don't forget that these styles must follow after general styles. It's even better to show them only for IE6 and IE7 by conditional comments: http://basicuse.net/articles/pl/textile/html_css/conditional_comments_for_ie
tutkun
November 14, 2013 at 02:19 pm
#container {
  display: inline-block;
  text-align:center;
  vertical-align: middle;
}
#contents {
  /* for ie7* /
  zoom:1;
}
Steve Yancharas
July 22, 2014 at 01:03 pm
If you want to center vertically without an explicit height, use tables.. valign=center isn't going to kill anyone and it's cross-compatible.

Post comment

basicuse.net
html5_css
106160485398655174790

Quick navigation

General navigation