偏离中心的div

Question

我正在尝试将div x像素位置放在页面中心的右侧.因此,div将相对于中心.

到目前为止,我尝试过像傻瓜一样的东西

margin:0 auto;
margin-left:20px;

但是你不需要在浏览器中测试它就知道它不起作用.

在此先感谢您的帮助.

Answer 1

我尝试使用两个DIV,一个在另一个内.像这样的东西:

<div class="outer">
    <div class="inner">Hello, world!</div>
</div>

.outer {
    width: 1px; /* Or zero, or something very small */
    margin: auto;
    overflow: visible;
    background: red; /* A color just for debug */
}
.inner {
    margin-left: 20px;
    background: yellow; /* A color just for debug */
    width: 100px; /* Depending on the desired effect, width might be needed */
}

在jsfiddle看到这个例子.

根据div这个问题/答案,外部将水平居中:如何在另一个<div>中水平居中<div>？

然后,使用边距将内部差异向右移动20个像素.

请注意,如果您保留width为auto,则宽度将为零,并且可能不是您想要的.

Answer 2

如果您知道div要相对于中心定位的元素的宽度,那么您可以执行以下操作:

http://jsfiddle.net/UnsungHero97/Fg9n6/

HTML

<div id="box">off center</div>
<div id="box2">center</div>

CSS

#box {
    width: 300px;
    height: 100px;
    border: 1px solid magenta;
    margin: 0 auto;
    text-align: center;
    line-height: 100px;
    position: relative;
    left: 20px;
}
#box2 {
    width: 300px;
    height: 100px;
    border: 1px solid skyblue;
    margin: 0 auto;
    text-align: center;
    line-height: 100px;
}

结果