Posts Tagged ‘two solutions’

Center DIV Vertically

Until recently there was no convenient way of vertically centering on height boxes with open return. When working with tables is really easy to use valign = "middle", but unfortunately in CSS this is not possible.
Here I will present some methods for vertical centering DIV.

Defining the problem.
1. We have a field (eg. div) of known height
2. We inserted in the subject (usually a long text inserted in the div) who do not know the height (for example, its content is generated by database)
3. I want to object centered vertically
4. without using tables

Main in this solution in IE: internal object is positioned in the middle of the envelope field. Then moves up to half of its height. Used the wrong interpretation of the height in IE (). Inserted an extra div is needed for IE.
The decision to support better standards browsers (Mozilla, Opera, Safari, etc.) is quite different. The whole area is presented as a table (display: table; part of CSS). The internal object is presented as a table cell (display: table-cell). Here comes the trick – it is possible to use vertical-align for table-cell elements (IE ignores these properties or does not know their values).

Combine the two solutions for both the browser. Property beginning with an underscore can be seen from all versions of IE except IE7, property starting with # seen by IE7. Thus, writing feature remains hidden from other browsers.

In the code below works in IE5.0, 5.5 and 6.0, the Gecko-based browsers (Mozilla, Firefox, Netscape 7), in Opera 7, Konqueror 3.3.1. (maybe less version too), and Safari. The page can not be validated as a standard HTML / XHTML. Read the rest of this entry »

VN:F [1.9.18_1163]
Rating: 0.2/10 (10 votes cast)