How to Vertically Align Dynamically Sized Divs in CSS?

Vertical Alignment of Dynamically Sized Divs in CSS

Vertically aligning a div container can pose a challenge when the div's height and width are unknown beforehand. This can often occur when the div contains an image or Flash object.

Vertical Alignment with Dynamic Sizes

To achieve vertical alignment in this scenario, we can leverage the power of CSS2. This solution involves no tricks or hacks and relies solely on CSS principles.

The key to alignment is the combination of vertical-align: middle and line-height: 0 applied to the child element ('wrap') within the container ('center'). However, to make this work, the container must have a fixed line-height.

HTML Structure:

<code class="html"><span id="center">
    <span id="wrap">
        <img src="image.png" alt="" />
    </span>
</span></code>

CSS Styles:

<code class="css">#center {
    position: relative;
    display: block;
    top: 50%;
    margin-top: -1000px;
    height: 2000px;
    text-align: center;
    line-height: 2000px;
}

#wrap {
    line-height: 0;
}

#wrap img {
    vertical-align: middle;
}</code>

Implementation Details:

• Position the Container: The 'center' div is given a relative position and aligned vertically at 50% of the parent container. Its height is set to 2000px to ensure sufficient space for alignment.
• Set Line Height to 0: The 'wrap' div has its line height set to 0, effectively removing any space between lines.
• Middle Alignment: The 'wrap' div's child image is vertically aligned in the center using 'vertical-align: middle'.

Compatibility

This solution has been tested in IE8 , Opera, Safari, Firefox, and Chrome.

IE7 Caveat:

In IE7, it's necessary to combine the two innermost elements into a single line to achieve proper alignment:

<code class="html"><span id="center">
    <span id="wrap"><img src="image.png" alt="" /></span>
</span></code>

The above is the detailed content of How to Vertically Align Dynamically Sized Divs in CSS?. For more information, please follow other related articles on the PHP Chinese website!