水平居中两个 div（宽度不等），不换行答案

【问题标题】：Horizontally centering two divs (unequal in width), with no wrap水平居中两个 div（宽度不等），不换行
【发布时间】：2012-03-29 23:37:41
【问题描述】：

我的页面如下所示：http://ink-12.terc.edu/index.cfm 当窗口展开时，我想让左侧的图片（儿童画）跟随居中内容的其余部分：

根据我在其他答案中找到的建议，我添加了一个外部 div (#maincontent) 来保存我想要滚动而不是换行的两个 div（#tbltframe 和 #drawings），以及一些额外的编码（ overflow:auto; display:inline-block; white-space:nowrap)。

现在我的页面如下所示： http://ink-12.web5test.terc.edu/index.cfm

所以现在它没有包裹（太棒了！），但它切断了我在右侧的投影（你仍然可以在底部看到它）。而且我需要让主要内容再次居中（在居中的页眉和页脚之后）——类似于我列出的第一个网页。更改后，主要内容左对齐。我尝试添加margin-right 和margin-left:auto，以及text-align:center，但都没有。我还添加了一个最小宽度，这似乎也没有。当我将最小宽度更改为更大的值（74em）时，我可以再次看到阴影，但我不知道为什么，因为#tbltframe（50em）和#drawings（14em）= 64em。

任何帮助将不胜感激。在我列出的任一网页上继续使用代码的建议都可以。谢谢！

【问题讨论】：

截屏这些网站的当前状态可能是个好主意。这样，将来查看您的问题的人就会知道发生了什么，并且仍然可能从中受益。
@thomas shields，感谢您的建议。我只是尝试上传屏幕截图，但由于我是新用户而不允许上传。
将截图上传至imgur.com并在cmets中发布链接；我会为你编辑它们。
@ThomasShields，好的，谢谢！这是我谈论的第一个网页：i.imgur.com/2xMsb.png，这是第二个网页：i.imgur.com/4QKip.png
亲爱的看到我的回答，如果这对您有帮助，请告诉我，否则我会根据您的需要更改代码...谢谢

标签： css html centering

【解决方案1】：

请在骨架.css 第 64 行尝试以下 css

#maincontent {
    display: inline-block;
    overflow: auto;
    white-space: nowrap;
    width: 1169px;
}

它将增加主要内容 div 的宽度，因此图像不会从侧面切割..

【讨论】：

感谢您的回复。但我只是想知道我的数学在这里发生了什么，因为我的外部 div (#maincontent = 64em) 包含两个 div (#drawings = 14em 和 #tbltframe1 = 50em)。数学加起来，所以没有理由应该切断任何东西......

【解决方案2】：

找到解决方案：http://www.search-this.com/2008/08/28/lets-all-get-inline-in-a-block-in-a-block/

必须：

在外部 div 上创建最小宽度或宽度 (#maincontent)

使用 display:block 使#maincontent 成为块元素

居中#maincontent with text-align:center

使用 white-space:nowrap 使内部 div（#drawings 和 #tbltframe）不包含在 #maincontent 中；

使用 display:inline-block 使内部 div 内嵌块元素

然后让里面的文本再次换行（如果你愿意的话）用空格：正常

【讨论】：