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 */
}

请参阅this example live at jsfiddle。

根据此问题/答案，外部div将水平居中：How to horizontally center a <div> in another <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;
}

<强>结果

Answer 3

您可以将div居中（带边距：自动）并将内容（在另一个div中）向右移动X像素：

   margin-right:-20px

或者只是让你的封闭div长40像素，并将你的文字对齐

Answer 4

<code>
<div class="col-xs-12 (or whatever the div is)" style="position:relative;left:20px;text-align:center">Your text here</div>
</code>

这适用于所有Bootstraps，html5（甚至在MediaWiki地狱）。诀窍是“POSITION：RELATIVE”

你可以做与CSS相同的事情。

<code>
.whateva {
  position:relative;
  left:20px;
  text-align:center;
}
</code>

Answer 5

使用此代码：

<!DOCTYPE HTML>
<html>
    <head>
        <title></title>
        <style type="text/css">
            #outer {
                position:relative;
                width:300px;
                height:100px;
                background-color:#000000;
            }
            #inner {
                position:absolute;
                left:50%;
                width:100px;
                height:100px;
                margin-left:-30px; /*Basic Margin Left-Half of Width=20px-50px=-30px*/
                background-color:#ff0000;
            }
        </style>
    </head>
    <body>
        <div id="outer">
            <div id="inner"></div>
        </div>
    </body>
</html>

<强>结果：
enter image description here

偏离中心的div

5 个答案: