3

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

测试.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>​

测试.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;
}​

我要做的是让内容在容器的中心对齐，而不是让容器居中，因为这两个元素都使用最大宽度。

如果我将容器的边距设置为自动并将其设置为特定宽度（比如 410 像素，刚好够 2 个 200 像素的最大宽度），我会得到：

使容器居中

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

缩小的图像

有没有一种方法可以确保两个子元素始终水平居中，最好不使用 JavaScript 并且只使用纯 CSS/HTML？

4

1 回答 1

5

试试这个，希望它是你所追求的......

#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>
于 2012-12-19T00:55:45.217 回答