CSS中心分层动态div

这个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>

---

如果您是指中间的标题，请使用以下方式：

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

该位置应与包装器相对

我只是重新组织了主体结构，添加了一个div并浮动了所有内容。

---

然后在中间部分我添加了标题和图像，您可以将其样式设置为相对div的中心。

如果您提供一些示例代码，我们将更好地为您提供帮助。同时，以下代码应该考虑您要查找的内容：

HTML

虽然不需要硬编码img大小，只需删除那些CSS行，div就会自动调整为img的默认大小

---

这些解决方案都不能正常工作，最终使其工作的方法是使用以下技巧：

---

然后，你只需将所有元素绝对放置在包装器中，并将子元素相对放置，如帖子中所示

你能发布你尝试过的内容吗（请整洁地发布）？我尝试过的是多种方法的组合，然而，每种方法总有一个阿喀琉斯治愈法阿喀琉斯没有治愈任何人。他的脚后跟是他的弱点：）。回到正题上来，您的标记有缺陷。它使“标题”和“图像”与“左按钮”和“右按钮”处于同一级别…好吧，那么你建议我如何设置标记的格式我需要将标题和图像居中，我需要图像位于标题下，标题可以更改高度我为你构建一个JSFIDLE。好了，很接近了，但是左右按钮没有与图像重叠问题在于图像设置了包装的大小，如果标题比图像宽，它将被切掉好的点A_funs。现在我将在其中添加最小宽度和最大宽度。

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

<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>​

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