Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • Horizontally center a div inside a div with css3

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 217
    Comment on it

    Box-pack
    The box-pack property specifies where child elements of the box are placed when the box is larger than the size of the children. It specifies the vertical position in vertical boxes, and the horizontal position in horizontal boxes.

    Box-align
    The CSS box-align property specifies how an element aligns its contents across (perpendicular to) the direction of its layout.

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style>
        #outer{
        width:100%;
    
        /* Firefox */
        display:-moz-box;
        -moz-box-pack:center;
        -moz-box-align:center;
    
        /* Safari and Chrome */
        display:-webkit-box;
        -webkit-box-pack:center;
        -webkit-box-align:center;
    
        display:box;
        box-pack:center;
        box-align:center;
        border: 1px solid ;
        padding: 10px;
    
    }
    #inner{
        width:50%;
        border: 1px solid ;
        padding: 10px;
    }
        </style>
    </head>
    <body>
        <div id="outer">
            <div id="inner"></div>
        </div>
    </body>
    </html>
    

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: