在具有最大宽度时将div内容居中

Question

我有这个容器里面有2个元素:http://jsfiddle.net/scQa2/1/(JSFiddle似乎没有正确居中,所以最好复制并粘贴代码)

的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;
}?

我要做的是让内容在容器的中心对齐,而不是让容器居中,因为两个元素都使用max-width.

如果我将容器的边距设置为自动并将其设置为特定宽度(例如410px,刚好足够2个最大宽度为200px),我得到:

容器中心http://f.cl.ly/items/3F2L3j0Q1J1X0U2t0J0P/Screen%20Shot%202012-12-19%20at%2000.29.16.png

但是如果子元素缩小到最大宽度以下,则它们不会对齐,因为容器没有更改宽度:

有没有办法可以确保两个子元素始终水平居中,最好是没有JavaScript,只有纯CSS/HTML？

Answer 1

试试这个,希望你追求的是......

#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>