css - div css 样式中的 Div - 使用填充将内部 div 置于外部中心？

Question

所以我有 2 个 div，1 个在另一个中。 #outer 最外层的 div 和 #frame 带 #outer 的 div。

关于#outer，我应用了一张背景图片，它会占据整个浏览器空间。

frame 是文本所在的位置 - 文本将随着不同的字符串长度不断变化。但是，我只希望#frame 占据#outer 的中心部分，这样文本就不会泄漏到外面(这是因为#outer 中的背景图片有一个类似黑板的图形 - 我希望它看起来好像文本是被写在黑板上，没有文字跑到线外)。

我应该为此使用填充吗？就像在#frame 上设置填充属性一样吗？或者我应该调整框架的宽度？我如何让这个傻瓜居中？!漂浮？软垫？我迷路了……

HTML:

<div id='outer'>
  <div id='frame'>
  </div>
</div>

CSS:

#outer {
height: 612px;
background: url('http://i151.photobucket.com/albums/s147/yungottii/abveaspi_background_final.png') no-repeat 0 0 scroll;
background-size: 100%;
}

#frame {
text-align: center;
height: 612px;   
padding: 50px;
overflow: auto;
font-family: Didot, "Didot LT STD", "Hoefler Text", Garamond, "Times New Roman", serif;
font-size: 60px;
color: black; 
}

在过去的一个小时里，我一直在处理 padding、border 和 margin，试图从总体上了解盒子模型。任何人都可以帮助我完成此任务的任何快速指示？

PS 这可能很难看，因为这可能与您的浏览器设置还不完全兼容，但您可以转到:

http://www.abveaspirations.com

看看上面的代码目前吐出了什么。正如您可能看到的那样，特别长的字符串/文本泄漏到玻璃外。顺便说一句，我正在使用 textualizer 插件，不确定这是否会改变任何东西......

Answer 1

这个答案比它可能的要复杂一些。这几乎可以用填充来完成，但我觉得这种方式是你正在做的最流畅和可靠的结果，而且它也有效对于响应式网站来说非常好，因此它不会在您放大和缩小屏幕尺寸时中断。

下面是实际演示，您可以按照我所说的进行操作，同时查看完整代码:

http://jsfiddle.net/9FtFh/1/

好吧，首先，只是为了设置你的外部 div，我基本上只是设置 position: relative; 就可以了，其他一切都很好。这只是因为我将框架设置为 position: absolute; 并且我希望它相对于这个外部 div 定位。

之后，让我们看看框架的变化......

position: absolute;
top: 10%;
bottom: 20%;
left: 15%;
right: 15%;

这些样式用于将 div 的边界拉伸(stretch)到特定点。请注意，框架元素上不再设置高度或宽度，必须将其删除。基本上，这些样式表示 div 的顶部距离外部 div 的顶部 10%。底部距离外部 div 底部 20%.. 等等。我使用百分比而不是像素，因为这将确保定位适应屏幕的任何宽度。

请注意，我在框架上设置了一个虚线边框，这样您就可以随时看到框的大小和位置。

我不担心文本内容的垂直居中，因为我相当确定您的文本效果插件可以处理这个问题。如果我在这方面有误，请告诉我，我可以对此进行扩展。

现在，另一个挑战是，一旦屏幕尺寸变小，图像的高度就会开始小于外部容器。这可能不是你想要的，所以我添加了一个媒体查询:

@media only screen
and (max-width: 1060px) {

    #outer {
        height: 0;
        padding-top: 47.85%;
    }

}

它的作用是仅在屏幕达到一定宽度后才应用样式。我根据图像开始缩小超过容器边缘的点选择最大宽度。

至于应用的样式，这是在调整大小时保持容器纵横比的小技巧。我将 height 设置为 0，然后使用 padding-top 重新创建高度。我使用的数字 (47.85%) 是图像高度与宽度的近似比率。 (图像的高度大约是宽度的 47.85%。)现在将开始按屏幕比例缩小整个容器，以匹配图像。因为您的框架是绝对定位的，所以它会在行驶过程中保持不变，并保持其基于百分比的位置。

有一件我没有做但您可能感兴趣的事情是，一旦图像宽度开始变得如此之宽以至于底部被截断时，设置另一个媒体查询。此时，您可以将框架底部设置为 0% 以使其匹配。 (您可能还需要定期更新 top 属性，因为屏幕越来越宽。这只是因为您设置了截断图像的高度，使百分比无关紧要。)

在我链接到的那个例子中，尝试重新调整底部框架的宽度大小，观察虚线如何保持在应有的位置，以及内部内容如何调整。还要注意容器如何保持设置的高度，直到图像变得太小，然后一切开始缩小。

我只剩下一个明显的问题，那就是因为你所有的文本内容都是一个字母一个字母地绝对定位的，重新调整屏幕大小会导致元素溢出，直到出现新的幻灯片，并且字母会根据新的宽度重新定位。这是今后要牢记的事情。