当它们具有最大宽度时将 div 内容居中

Posted 2023-03-06

【中文标题】当它们具有最大宽度时将 div 内容居中

【英文标题】：Centring div content when they have max-width

【发布时间】：2012-12-06 07:12:11

【问题描述】：

我有这个容器，里面有 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;
​

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

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

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

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

【问题讨论】：

我不太清楚你想要的结果是什么。只要它们仍然居中，您就可以垂直堆叠 2 个内容块。但是如果有足够的宽度，你希望它们并排浮动。你能澄清一下你想要发生的事情吗？

@EllenB 这有点难以解释，但基本上这两个元素以最大宽度彼此并排居中对齐，否则居中对齐，否则无法居中对齐容器因为容器不会随元素改变宽度

【参考方案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>

【讨论】：

如果您愿意，当然可以将