HTML Div Style Vertical Align Using CSS

Updated on 16 Jan 2012,
Published on 02 Jul 2008

Using the Vertical Align property of CSS styles for HTML div tag is not the right way to center align the text or nested HTML elements like p tag or div tag vertically. To center align the inner Text or HTML tags of div in vertical direction you have to use the CSS property styles to apply the logic of vertical alignment. Here we will discuss all about vertical alignment of text as well as nested HTML Div tags. While doing the HTML code for Div layout websites try to use minimum of height CSS property for Div tags. Height CSS property style creates extra white spaces in the HTML document if there is lesser text inside the Div elements that looks useless and messy. Try to use width, float, display, padding or margin CSS style properties to provide the better structure to the Div based web layouts. In this tutorial we will also use padding, margin and width CSS properties to vertical align the text places inside the HTML div <div> tag.

CSS Div Postitioning Examples:

From the following links you can view the live samples of Div Positioning styles using CSS:

CSS padding and Border style properties

padding: padding property of CSS takes four values in a sequence as follows:

padding: top right bottom left;

top, right, bottom and left accepts the numeric value along with units like px for pixels that sets the padding from the top, right, bottom and left edge of the HTML element on which this CSS style property is applied. For example:

padding: 5px 10px 15px 20px;

Above example of padding property will set the top padding to 5px, right padding to 10px, bottom padding to 15px and left padding to 20px.

padding: 5px;

above example will set all side padding equal to 5px.

padding: 5px 10px;

above example of padding property will set the top padding to 5px and right padding to 10px. Opposite sides will automatically get the values as bottom padding 5px and left padding 10px.

border: border property of CSS takes three values in sequence as:

border: border-type width color[#RRGGBB];

border-type accepts value as name of different border styles such as solid, double, outset, inset, dashed. Width accepts the numeric value with unit like px for pixels. And color attribute accepts the color name or RGB hex code. For example:

border: solid 1px #ff0000;

Example for HTML Div style Vertical Align using CSS

<html>
<head>
    <title>HTML Div vertical align using CSS</title>
    <style type="text/css">
        .outerDiv {
            border: solid 1px #000000;
            width: 300px;
            padding: 5px 2px 5px 2px;
        }
        
        .innerDiv {
            width: 95%;
            margin: 0px auto;
            padding: 40px 0px 40px 5px;
            border: solid 1px #000000;
        }
    </style>
</head>
<body>
    <div class="outerDiv">
        <div class="innerDiv">
            This text is placed inside the next HTML div tag.<br />
            CSS style is used to vertical align the nested div and text.
        </div>
    </div>
</body>
</html>

In the above example value of padding of CSS class .innerDiv is set as:

padding: 40px 0px 40px 5px;

40px padding for top and bottom set the vertical alignment of the nested div element and thus vertical aligns the text placed inside it. 5px at the last sets the left side padding for the text inside the inner Div tag. margin CSS property has value margin: 0px auto; this value center aligns the nested div tag. Click here to learn more about HTML Div align to center position.

Output:

Get the output of above discussed code from the following link:

Div Vertical Align Center Position 01

Div Vertical Align Center Position 02

Continue to next tutorial: HTML Div Style Transparent Background Color to learn Div transparency using CSS styles.

0 Responses to "HTML Div Style Vertical Align Using CSS"
Leave a Comment
* required
* required
* will not be published
* optional
* hint: http://www.example.com
  • Subscribe via Email