Home >Web Front-end >CSS Tutorial >How to Vertically Center Text in Dynamically Height Divs?

How to Vertically Center Text in Dynamically Height Divs?

Barbara StreisandOriginal: 2024-11-07 12:13:03517browse

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>

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

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;
}

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!

chrome html Property this display table windows linux ubuntu

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：How to Customize Cursor Images in CSS Across Different Browsers?Next article：How to Customize Cursor Images in CSS Across Different Browsers?

See more

How to Vertically Center Text in Dynamically Height Divs?

Text

Related articles