Add 'How to align a DIV horizontally center using CSS'

4 years ago · 61ea7f7cae
parent 2e6b80262c
commit 61ea7f7cae
1 changed files with 30 additions and 0 deletions
--- a/How-to-align-a-DIV-horizontally-center-using-CSS.md
+++ b/How-to-align-a-DIV-horizontally-center-using-CSS.md
@ -0,0 +1,30 @@
 ### How to align a DIV horizontally center using CSS
 Use the CSS margin property
 If you would like to center align a `<div>` element horizontally with respect to the parent element you can use the CSS margin property with the value auto for the left and right side, i.e. set the style rule `margin: 0 auto;` for the div element. The auto value automatically adjusts the left and right margin and horizontally center align the div element's block box.
 However, this solution will work only when the width of the parent element is more than the containing div element that you want to align. Let's check out an example:
 ```
 <!DOCTYPE html>
 <html lang="en">
 <head>
 <meta charset="utf-8">
 <title>Horizontally Center a Div Using CSS</title>
 <style>
    .container {
        width: 80%;
        margin: 0 auto;
        padding: 20px;
        background: #f0e68c;
    }
 </style>
 </head>
 <body>
    <div class="container">
        <h1>This is a heading</h1>
        <p>This is a paragraph.</p>
    </div>
 </body>
 </html>
 ```