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

How to Vertically Center Text in Dynamically Height Divs?

Barbara Streisand
Barbara StreisandOriginal
2024-11-07 12:13:03430browse

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>

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!

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