How to Vertically Center Text in Dynamically Height Divs?-CSS Tutorial-php.cn

How to Vertically Center Text in Dynamically Height Divs?

Barbara Streisand

Release： 2024-11-07 12:13:03

Original

493 people have browsed it

How to Vertically Center Text in Dynamically Height Divs?

Vertical Text Alignment in Dynamically Height Divs

When tailoring website elements to user-adjustable browser heights, it's often essential to ensure the vertical alignment of text within dynamic height divs remains centered. How can this be achieved?

Consider the following HTML structure:

<body>
    <div>

Copy after login

To vertically align the

tag within the bounding

regardless of its height, employ the following strategy:

Solution: Leverage the display property to set the wrapper

element as a table, allowing the vertical-align property to center the contained element.

Example Code:

HTML

<body>
    <div>
        Text

Copy after login

CSS

body {width: 100%; height: 100%;}   /* for visual demonstration of div height...*/

div {
    position:absolute; height:100%; width:100%;
    display: table;
}
h1 {
    display: table-cell;
    vertical-align: middle;
    text-align:center;
}

Copy after login

This approach has been tested on various browsers and platforms, including:

Tested Systems:

Windows XP Professional, Service Pack 3
Windows 7 Home Edition, Service Pack 1
Linux Ubuntu 12.04

Tested Browsers:

Internet Explorer 8.0.6001.18702, 9.0.8112.164211C
Opera 11.62
Firefox 3.6.16, 12.0
Safari 5.1.2, 5.1.4
Google Chrome 18.0.1025.168 m
Chromium 18.0.1025.151 (Developer Build 130497 Linux)

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