CSS中心分层动态div

Question

这个css有点难以弄清楚......基本上我想要的是这张照片中的内容，但内容动态变化。

所以我设置了这样的html，基本上所有元素都堆积在包装器中，图片和标题将动态旋转，宽度和高度不同：

<div id="wrapper">
<div id="title"><h2></div>
<div id="image"><img></div>
<div id="leftbutton" class="but"><img></div>
<div id="rightbutton" class="but"><img></div>
</div>

我尝试过的一切都没有成功。我应该怎么做呢？

我最接近的是这个，但标题字段可以改变高度，这使得这种方法不起作用，因为，我必须相对定位图像，它的相对位置随着标题元素的增长和缩小而变化：

#wrapper{
position:relative;
text-align: center;
}
.but{
z-index:20;
position:absolute;
}
#leftbutton{
left:0px;
}
#rightbutton{
right:0px;
}
#title{
z-index: 3;
display: inline-block;
width:auto;
min-width: 80px;
max-width: 340px;
}
#image{
z-index: 1;
position: relative;
top:-21px;
}

Answer 1

如果您的意思是中心的标题使用这种方式：

#title {
    margin: 0 auto;
    width: /* your width */
}

位置应该是包装器的相对位置。

<强> JsFiddle UP

我只是重新组织了车身结构，增加了一个div并浮动了所有东西。 然后在中心部分内部我添加了标题和图像，您可以将其设置为相对div的居中。

Answer 2

如果您提供了一些示例代码，我们最好能够为您提供帮助。在此期间，以下代码应该处理您正在寻找的内容：

HTML

<div id="wrapper">
    <div id="title"><h2>Article Headline</h2></div>
    <div id="image"><img></div>
    <div id="leftbutton"><img></div>
    <div id="rightbutton"><img></div>
</div>​

CSS

​#wrapper {
    background:#6cb6d9;
    display:inline-block;
    position:relative;} 

#title {
    position:absolute;
    top:0;
    width:100%;
    text-align:center;}

#title h2 {
    background:green;
    color:white;
    padding:10px 15px 10px 15px;
    display:inline-block;
    max-width:200px}

#image {}

#image img {
    min-width:200px;
    height:300px;
    width:500px; }

#leftbutton {
    position:absolute;
    left:0;
    top:0;
    height:100%;
    width:75px;
    background:black;}

#rightbutton {
    position:absolute;
    right:0;
    top:0;
    height:100%;
    width:75px;
    background:black;}

虽然不是硬编码img大小，但只需删除那些CSS行，让div自动调整为img的默认大小。

http://jsfiddle.net/b7c7c/

Answer 3

这些解决方案都没有正常工作，最终让它发挥作用的方法是：How to center absolutely positioned element in div?

然后你只需将所有元素绝对放在包装器和子元素中，就像在帖子

中看到的那样