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

在过去的一个小时里，我一直在搞乱填充、边框和边距，试图总体上掌握盒子模型。任何人都可以帮助我完成此任务的任何快速指示？

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 的边界延伸到某些点。请注意，框架元素上不再设置高度或宽度，必须将其取出。基本上，这些样式表示 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 属性，因为屏幕越来越宽。这只是因为您设置了截断图像的高度，使百分比无关紧要。）

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

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

Answer 2

选项 1 http://jsfiddle.net/bdbpY/

#outer {
   background-size: 100% 100%;
}

而且它有效。唯一的问题是它会将图像的高度/宽度更改为您可能想要的东西。

---

选项 2http://jsfiddle.net/bdbpY/1/

另一个可能会更好的选择是这个

#frame {
   height: 100px;
   overflow: hidden;
}

这可以按您的意愿进行。

如果您要使用可调节宽度而不是固定像素，则可以尝试类似

#frame {
   max-height: 50%;
   overflow: hidden;
}

---

选项 3 http://jsfiddle.net/qLNFz/

这可能是最好的选择，也是最简单的。

我所做的就是这个

#frame {
    height: 29%;  
    padding: 10px 20px;
}

Answer 3

HTML

<div id='outer'>
    <div id='frame'><span class="sp">Sample Sample Sample Sample Sample Sample Sample Sample Sample Sample Sample Sample Sample Sample Sample  </span>
    </div>
</div>

CSS

* {
    margin:0px;
    padding:0px;
}
#outer {
    background: url('http://i151.photobucket.com/albums/s147/yungottii/abveaspi_background_final.png') no-repeat 0 0 scroll;
    background-size: 100% 100%;
    width:1000px;
    margin:0px;
}
#frame {
    margin:20px auto;
    text-align: center;
    width:600px;
    height:400px;
    padding: 50px;
    overflow: hidden;
    font-family: Didot, "Didot LT STD", "Hoefler Text", Garamond, "Times New Roman", serif;
    font-size: 60px;
    color: black;
    border:1px solid black;
}
.sp {
    overflow:hidden;
}

Demo

Answer 4

我使用overflow:hidden; 来处理长文本以适应框架。所以你的板子会是这样的http://jsfiddle.net/3pNSx/70/