如果空间足够，如何将 div 居中对齐，否则右对齐答案

【问题标题】：how to Center align div if enough space otherwise right align如果空间足够，如何将 div 居中对齐，否则右对齐
【发布时间】：2013-07-18 22:54:53
【问题描述】：

父容器 => 灵活宽度（宽度取决于浏览器窗口）

child div => 900px 的固定宽度（在父级内部）

我的要求是

如果父级的宽度大于 900，则将子级 div 居中对齐
如果父级的宽度小于 900，则将子级 div 向右对齐。因此，左侧部分将被截断。

有没有纯css解决方案？

【问题讨论】：

哼哼……为什么？如果您的孩子是 900 像素，则不必将其居中或左右对齐...因为它占用了所有宽度！
是父容器的宽度=浏览器窗口的宽度？
你真的应该发布你的代码并创建一个jsFiddle
parent 是任何宽度自动设置的 div。孩子的宽度被指定为 900px

标签： css

【解决方案1】：

我fiddled一点。

你基本上需要这个，对吗？

#parent{
    background-color: blue;
    overflow: hidden;
    direction:rtl;
}

.child{
    width:900px;   
    float:right;
    margin: 0 auto;
    direction:ltr;
}

所以方向对齐 div 而不使子 div 浮动到墙上，而子 div 内部的另一个方向不会弄乱里面的内容。边距：0 自动；将 div 居中并溢出：隐藏以截断。

编辑：现在试试。

【讨论】：

谢谢！它现在工作。所以方向 rtl 似乎有魔力。我在小提琴中看到不再需要浮动

【解决方案2】：

你可以试试媒体查询..

例如：

@media only screen and (max-device-width: 900px) {
   .div { margin: 0px auto }
}
@media only screen and (min-device-width: 900px) {
   .div { float: left; }
}

您可以尝试将 css 与它结合起来......

【讨论】：

感谢您提供我将来可能需要的新信息。对于这一方向有效，它也适用于 IE。

【解决方案3】：

parent {direction:rtl}
child {direction:ltr;}

基本上，overflow 将从右向左滚动，如果hidden 则隐藏左侧；

在这里测试和使用它:)：http://codepen.io/gcyrillus/pen/GHCne

【讨论】：

非常感谢。这行得通！我不能接受多个答案，所以我投票赞成你的答案:)
只要你得到你的答案没问题。这是一个古老的技巧，用于切换垂直滚动条的一侧（它不再是:)很长一段时间了。

【解决方案4】：

您是否考虑过使用media queries？

您只需确保它们在您定位的所有浏览器中都是supported。

【讨论】：