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:
text text text text text text content content content content content
Second example
In this example we use more difficult structure of HTML and CSS which is shown below.
Here is HTML:
text text text text text text content content content content content
CSS for current example:
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:
Here is HTML file with two examples:
index.html 2.46 kB
Continue reading here: How to resize images proportionally using CSS for responsive web design
Was this article helpful?