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

Question

水平居中a的一种相当标准的方法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

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

演示

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

事实证明，我能够做我需要做的浮动 DIV 的事情。

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

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