Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 

  • Horizontally center a div inside a div with css3

    @sunil.chatterji
    Recommendations Offline Message

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 127
    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>
    box model css3 horizontally centering a div box-pack css3 box-align css3
    Comment on it

 0 Comment(s)

Sign In
Forgot Password?
                           OR                           
Create an account !!
                           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: