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

Question

A fairly standard way to horizontally centre a DIV is to set the left and right margins to auto .

However, I have a DIV that I want to be mostly horizontally centred, but I want to nudge it a little toward the left.

I tried setting the margins like so:

margin: 100px 60% 24px 40%;

... and also like this:

margin: 100px 40% 24px 60%;

... but both resulted in the DIV being positioned further to the right.

I tried adding padding to the DIV , but that also only moves it to the right.

In short, it seems no matter what I do, the DIV moves to the right, not to the left as desired.

How do I nudge a DIV a little to the left of centre?

Answer 1

A different way of handling this is making a parent wrapper div. Where you set that to auto so that parent is centered, but the child div is then starts at the center but moves to the right. See fiddle 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;
}

Then if you wanted to further optimize the position of the child div, you could just add some left styles to it

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

Since you tagged css3 for your question so you can use it :

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

there is an option with text-align, display and negative margin .

DEMO

---

HTML test base :

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

---

CSS base:

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

If you set the margin-right or margin-left as a separate rule after setting the margin rule, you'll still get frustrated, but not as much:

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

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

#second {
    margin-right: 42%;
}

See example fiddle: http://jsfiddle.net/Q7EHX/

Answer 5

Turns out I was able to do what I needed to do with floating the DIVs.

.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

position relative.

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