居中流体绝对定位部分

所以我知道这是另一个居中问题，但我一直漫游Google和SO几天现在没有解决方案，所以我现在要问。居中流体绝对定位部分

我想要做的是水平居中一个最大宽度的流体部分元素，它具有绝对定位元素。问题是，正如您在我的jsFiddle中看到的那样，边距占用了可用空间的50％，而该部分使用了另外50％。我想要做的是保持该部分完全居中，但使浏览器窗口关闭时边距变小，同时保持该部分不会重新调整大小，直到窗口边缘到达边缘。

我想避免使用任何表格，表格单元格解决方案，因为我阅读了CSS-Tricks，它们将表格元素绝对定位在表格单元格中可能是一种真正的痛苦。

编辑基本上，目标是让内容占用尽可能多的空间，而不必调整大小，直到视口宽度强制内容响应。

谢谢你在正确的方向上碰撞。

HTML：

<section id="wrapper"> 
    <section id="content"> 
     <p>Absolutely positioned imgs, btns, etc. go in here</p> 
    </section> 
</section>

CSS：

#wrapper { 
position:absolute; 
width:50%; 
height:300px; 
margin-left:25%; 
margin-right:25%; 
outline:1px solid red; 
} 
#content { 
position:absolute; 
width:100%; 
height:100%;  
max-width:500px; 
background:rgb(225, 112, 75); 
}

来源

2013-04-15 Matt Whitehead

你可不要试试margin：0 auto;包装？这会使左右边距动态调整大小......（除非我误解了你之后的内容）。 –

@AlexLynham该技巧不适用于绝对定位的元素。 –

啊，我想我误解了它在这里的绝对定位元素。我的错。 –

您可以使用

#content { 
    display:inline-block; 
    text-align:center; 
}

居中的元素，将有一个display:inline-block;财产了。

编辑：现在，我已经更好地阅读你的问题，你也可以使用

#content { 
     margin:0 25%; 
    }

居中的第二部分。

here's your fiddle updated.正如你可以看到这个小提琴现在一切都集中和响应。

EDIT-2：也许你想添加一些媒体查询来达到你的目标。

@media screen and (max-width:720px){ 
    #content{width:100%; margin:0px;} 
}

此说，当屏幕达到720下，＃内容的宽度（和每个ID/CLASS，放在那里）将表现为宣布：就在你的CSS文件的末尾添加如下内容。

请注意，@media查询不是交叉浏览器，你可能想添加一个脚本，使他们在每个浏览器上工作，我发现respond.js一个很好的工具来完成这项工作。

另请注意，@media查询必须至少放置在您要在屏幕调整大小时更改的默认属性下，这就是为什么建议将它们添加到css文件的底部。

HERE is another fiddle与媒体应用（只是尝试调整框中查看效果）

来源

2013-04-15 08:34:14 Yenn

称为#content的第二部分在浏览器窗口的边缘到达之前仍会调整大小。我的主要问题是内容框缩小了调整大小，并且只占用了分配的百分比。我想保持这一点，直到窗口太小，并且被迫响应。 –

我想你应该为这个添加一些@media查询。像@ media screen和（max-width：720px）{content {width：100％; margin：0px;} }'将完成这项工作。即时更新我的答案小提琴 – Yenn

谢谢你的建议，但#content元素需要保持相同的宽度，除非浏览器窗口强制它调整大小。您的新示例使元素变得异常活跃，并且在移动窗口时仍会调整大小。 –

我不知道这是否是你所寻找的：jsfiddle

我改变了你的包装，以这样的：

#wrapper { 
    position: fixed; 
    top: 50%; 
    left: 50%; 
    margin-top: -150px; 
    margin-left: -200px; 
    width:400px; 
    height:300px; 
    outline:1px solid red; 
}

让你的div现在坐在屏幕中间

来源

2013-04-15 08:41:12 Andrew

如果#content元素没有调整大小，直到浏览器窗口的边缘达到它，这将工作。但是，这是我的主要问题，#content元素正在调整大小，当我想保持它相同，直到它被强制响应的屏幕宽度。 –

然后你需要使用jquery或javascript来改变#wrapper页面的大小，并仍然显示在px中，这样的位置的作品，也改变了余量，使它正确地坐在中心 – Andrew

是啊，我倾向于JS方式，但我真的想看看是否可以使用CSS来完成。 –

居中流体绝对定位部分

回答

相关问题