HTML Div Align to Center Position

Updated on 16 Jan 2012,
Published on 27 Jun 2008

In HTML pages CSS style properties provides much support to align the HTML div to center position. Most of the people try to use the align attribute of div tag to set the div to center position of HTML web page. But you must know that align attribute does not adjusts the position of div element it just aligns the inner text of <div> tag. Align attribute of HTML div tag accepts the values like left, right and center that aligns the inner text accordingly but div position remains on the same place in the HTML document presentation view while browsing it in a web browser. Here we will use the margin CSS property style along with width property for the div alignment to center position.

CSS Div Postitioning Examples:

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

CSS Margin and width style properties

CSS margin and width style properties both are used to align the div tag to center position without affecting the formatting of inner text.

1. margin: margin property of CSS takes four values in a sequence as follows:

margin: top right bottom left;

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

margin: 5px 10px 15px 20px;

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

margin: 5px;

above example will set all margins equal to 5px.

margin: 5px 10px;

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

2. width: width property of CSS accepts the numeric value with units like px for pixels that defines the boundary for inner Text of HTML element. For example:

width: 100px

HTML Example for Div aligned to Center Position

<html>
<head>
    <title>Div Float Center</title>
    <style type="text/css">
        .divCenter {
            margin: 0px auto;
            width: 200px;
        }
    </style>
</head>
<body>
    <div align="center">
        Text inside div is center aligned<br />
        because align attribute has value center.
    </div>
    <br />
    <br />
    <div style="margin: auto; width: 200px">
        Text inside this div is not center aligned because only div element is aligned center
        using inline style attribute.<br />
        CSS propery margin:auto;
    </div>
    <br />
    <br />
    <div class="divCenter">
        Text inside this div is not center aligned because only div element is aligned center
        using CSS class.
    </div>
</body>
</html>

Above example shows use of both CSS class as well as inline style attribute to set the div alignment to center position. CSS width property is compulsory with margin property in this case because div element gets the position based on the specified value of width. CSS margin property is set to auto, that automatically adjusts the equal margins for all the sides of div HTML element.

Output:

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

Div Align Center Position

Continue to next tutorial: HTML Div Style Vertical Align Using CSS to learn Div positioning vertically using CSS properties.

Previous Tutorial

Next Tutorial

sponsored links

5 Responses to "HTML Div Align to Center Position"

Gary Smith

I am trying to learn from your tutorials, but I think the links to the code for the examples has been mixed up.
For example,
on this page:

http://www.ezineasp.net/Samples/Div-Layouts/CSS-Div-Styles/Div-Align-Center-Position/Default.aspx

I see a red box containing text centered at the top inside a black box.
When I click the link "go to the sample code" or "get code for sample here...",
I get this code:

<html>
<head>
<title>Div Float Center</title>
<style type="text/css">
.divCenter
{
margin:0px auto;
width:200px;
}
</style>
</head>
<body>
<div align="center">
Text inside div is center aligned
<br />
because align attribute has value center. </div>

<br /><br />

<div style="margin:auto;width:200px">
Text inside this div is not center aligned because only div element is aligned center using inline style attribute.<br />
CSS propery margin:auto;
</div>
<br /><br />
<div class="divCenter">
Text inside this div is not center aligned because only div element is aligned center using CSS class.
</div>
</body>
</html>

This code give an entirely different result than the example shown.
This code produces three blocks of text with different centering characteristics and no borders at all.

I am trying to learn how to center one div within another as in the example shown on page:
http://www.ezineasp.net/Samples/Div-Layouts/CSS-Div-Styles/Div-Align-Center-Position/Default.aspx

Can you mail me the proper code or tell me how to find it on your tutorial site?

Thank you,
Gary Smith

Ezineasp.net

@Gary Smith:

Please try the following code:

<html>
<head>
<title>Div Float Center</title>
<style type="text/css">

.divCenter {
margin: 0px auto;
border: solid 5px red;
width: 200px;
height: 100px;
font-size: 140%;
}

#outer {
border: solid 5px #000;
width: 90%;
height: 200px;
}
</style>
</head>
<body>

<div id="outer">

<div class="divCenter">
div center position horizontally
</div>

</div>

</body>
</html>

Hope it will work for u.

Good Luck ;)

techtikus

The example above made me understand the how to center my content with the <div> tag. Thank you.

Richard Crane

It dun't wuk in the capitalist world of IE. It remains left aligned.

Travis

how can i make this work for div's on wordpress?