Question

通常我会通过将边距设置为auto，使用position：absolute或填充来实现此目的，但遗憾的是这些在这种情况下不起作用。我需要一个div，从页面水平偏心约15像素。棘手的一点是它需要在页面加宽时正确缩放。在我看来，我需要根据中心点而不是左手边进行水平调整。我怎么能实现这个目标？感谢。

Answer 1

使用一个居中的容器div，然后使用margin-left:npx提供的内容 - 就像这样：

<强> HTML

<div id="container">
    <span id="green">&nbsp;</span><br />
    <span id="blue">&nbsp;</span>
</div>

<强> CSS

#container{width:100px; margin:auto auto; background-color:red;}
#container span{display:block; width:100%; }
#green{background-color:green; margin-left:10px;}
#blue{background-color:blue; margin-left:-10px;}

请参阅此处编码的示例 - http://jsfiddle.net/Xpk8A/1/

Answer 2

给出一个包装：保证金：自动; position：absolute;

内包装，放div：位置：相对; 左：-15px; （或任何你想要的）

示例页面会有所帮助。

Answer 3

您绝对可以定位div并将left属性设置为50％。然后，将margin-left设置为50％+ 5px（无论是什么）。但是，只有在盒子上有固定宽度时，这才有效。例如，如果框宽为200px，则margin-left为-115px。

Answer 4

关键是设置width:100%和固定的margin，如下面的示例所示

<style>
div {
background-color:red;
 height:100px;
margin:0 auto;
width:100%;
margin-left:15px;
}
</style>

<div></div>

Answer 5

<html>
    <body>
        <div class="centered">
            <div class="offcenter">
            </div>
        </div>
    </body>
</html>

css将是：

.centered
{
    margin: 0 auto;
    width:300px;
    height:200px;
    background-color:red;
}

.offcenter
{
    background-color:blue;
    width:285px;
    height:inherit;
    float:right;
}

http://jsfiddle.net/evbbq/

Answer 6

您可以display:inline-block使用center DIV margin，然后将.Parent{text-align:center;} .Child{ display:inline-block; text-align:left; width:200px; height:150px; background:red; margin-left:15px; }提供给它。

像这样：

margin-left:15px

检查这个小提琴http://jsfiddle.net/Xpk8A/2/

删除Run，然后点击小提琴中的{{1}}按钮，查看其他内容。

使div稍微偏离中心

6 个答案: