Horizontal Alignment in CSS

Example: Center a DIV element on a page. Also, center the images within the DIV element:

<!DOCTYPE html>
<html>
    <head>
        <style type="text/css">
            #center {
                margin-left : auto;
                margin-right: auto;
                width: 420px;
                height: 420px;
                border: 1px dotted #111;
                background: #EFEFCC;
                text-align: center;
            }
 
            img {
                text-align: center;
                height: 210px;
                width: 190px;
                border: 1px dotted #111;
            }
 
            p {
                text-decoration: none;
                font-size: 1em;
            }
 
        </style>
    </head>
 
    <body>
        <div id="center">
            This block is centered.
            <p>
                <img src="/images/test1.jpg" alt="Centered image 1" />
                <img src="/images/test2.jpg" alt="Centered image 2" />
            </p>
        </div> 
    </body>
</html>

Wisenheimer Brainstorm Wiki

User Tools

Site Tools

Horizontal Alignment in CSS

Page Tools