Question

I’ve got this container with 2 elements inside: http://jsfiddle.net/scQa2/1/ (JSFiddle doesn’t seem to center properly so it’s best to copy and paste the code)

test.html

<div id="main">
    <img src="http://images.fanpop.com/images/image_uploads/Flower-Wallpaper-flowers-249402_1024_768.jpg" id="image"/>
    <div id="text">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </div>
</div>​

test.css

#main {
    width: 410px;
    margin: auto;
}

#image {
    max-width: 200px;
    width: 100%;
    float: left;
    border: 1px solid blue;
}

#text {
    max-width: 200px;
    width: 100%;
    float: left;
    border: 1px solid red;
}​

What I am to do is have the contents align in the centre of the container, rather than have the container centred as since the two elements are both using max-width.

If I set the margin of the container to auto and set it to a specific width (say 410px, just enough for the 2 max-widths of 200px) , I get this:

But if the child elements shrink below the max-width they do not align as the container has not changed width:

Is there a way I can ensure that the two child elements are centred horizontally at all times, preferably without JavaScript and with just pure CSS/HTML?

Answer 1

Try this, hope its what you’re after…

#main {
                border: 1px solid red;
                display: block;
                width: 90%;
                margin: 0 auto;
                text-align: center;
            }
            .image{
                vertical-align: top;

                border: 1px solid blue;
                display: inline-block;
            }
            .image img {
                max-width: 200px;
            }

            #text {
                vertical-align: top;
                max-width: 200px;
                border: 1px solid red;
                display: inline-block;
            }

html

<div id="main">
            <p class="image">
                <img src="http://images.fanpop.com/images/image_uploads/Flower-Wallpaper-flowers-249402_1024_768.jpg"/>
            </p>

    <p id="text">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>
</div>