使用CSS，如何将DIV移动到中心位置的左侧？

Question

将DIV水平居中的一种相当标准的方法是将左右边距设置为auto。

但是，我有一个DIV，我希望大部分都是水平居中的，但我想向左推一点。

我尝试像这样设置边距：

margin: 100px 60% 24px 40%;

......也是这样的：

margin: 100px 40% 24px 60%;

...但是两者导致DIV位于更右侧。

我尝试在DIV添加填充，但这也只是向右移动。

简而言之，无论我做什么，DIV都向右移动，而不是向左移动。

如何在中心左侧轻推DIV？

Answer 1

处理此问题的另一种方法是创建父包装器div。您将其设置为auto以使父项居中，但子div从中心开始但向右移动。请参阅小提琴http://jsfiddle.net/4H26W/1/

html

<div id="red">
    <div id="blue">Some text</div>
</div>

CSS

#red {
    width: 1px; /* you could actually just change it to 0px */
    margin: 100px auto;
    background: red;
}
#blue {
    width: 200px;
    background: blue;
}

然后，如果你想进一步优化子div的位置，你可以添加一些左边的样式

position: relative; /* has to be position relative for left to work, or you could just do margin-left: -50px; too */
left: -50px;

http://jsfiddle.net/4H26W/2/

Answer 2

由于您为自己的问题标记了css3，因此可以使用它：

margin: auto;
-webkit-transform: translateX(10px); /* 10px to left */
-moz-transform: translateX(10px); /* 10px to left */
-ms-transform: translateX(10px); /* 10px to left */
 transform: translateX(10px); /* 10px to left */

Answer 3

有一个带文本对齐，显示和负边距的选项。

<强> DEMO

---

HTML测试基础：

<div class="left">center on my left</div>
<hr/>
<div class="right">center on my right</div>
<hr/>
<div >center me</div>

---

CSS基础：

body {
  text-align:center;
  background:linear-gradient(to right,gray 50%,white 50%)
}
div {
  width:20%;/* whatever */
  display:inline-block;
  border:solid;
}
.left {
  margin-left:-20%;/* whatever */
}

.right {
  margin-right:-20%;/* whatever */
}

Answer 4

如果您在设置margin-right规则后将margin-left或margin设置为单独的规则，您仍然会感到沮丧，但不会那么多：

<div id="first"></div>
<div id="second"></div>

div {
    height: 100px;
    width: 100px;
    border: 1px solid red;
    margin: 2em auto;
}

#second {
    margin-right: 42%;
}

参见示例小提琴：http://jsfiddle.net/Q7EHX/

Answer 5

原来我能够做我需要做的漂浮DIV。

.left,
.right {
    display: block;
    position: relative;
    margin-bottom: 2em;
    clear: both;
}

.left {
    float: left;
    margin-left: 20px;
}
.right {
    float: right;
    margin-right: 20px;
}

Answer 6

位置相对。

<div style="margin:100px auto 24px;
    position:relative;left:-30px;
    border:1px solid red;width:200px
">should be a little off-center</div>