html tutorial - How to align a DIV horizontally center using CSS - html5 - html code - html form



Answer: Set the style rule "margin:0 auto;" for DIV

If you would like to align the <div> element horizontally center with respect to the parent element you can use the CSS margin property.

Example

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>Center Align Div Using CSS - html5 - html code - html form - In 30Sec by Microsoft Award MVP - | wikitechy</title>
    <style type="text/css">
        .container {
            width: 100%;
            margin: 0 auto;
            padding: 22px;
            background: #f0e68c;
        }
    </style>
    </head>
    <body>
        <div class="container">
            <h1>This is a heading</h1>
            <p>This is a paragraph.</p>
        </div>
    </body>
    </html>

    As you can see we have applied the auto value to the left and right margin property of the <div> element.

    Note:This use to works when the width of parent element is containing <div> element that you want to align.


    Related Searches to how to align a DIV horizontally center using CSS