User Tools

Site Tools


Horizontal Alignment in CSS

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

<!DOCTYPE html>
        <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;
        <div id="center">
            This block is centered.
                <img src="/images/test1.jpg" alt="Centered image 1" />
                <img src="/images/test2.jpg" alt="Centered image 2" />
notes/css/horiz_align.txt · Last modified: 2020/08/26 (external edit)