Offset div from center

Question

I'm trying to position a div x amount of pixels to the right of the center of the page. The div would therefore be relative to the center.

So far, I've tried something stupid like

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

But you don't need to test that in a browser to know it wouldn't work.

Thanks in advance for any help.

Answer 1

I'd try using two DIVs, one inside another. Something like this:

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

See this example live at jsfiddle.

The outer div would be horizontally centered as per this question/answer: How to horizontally center a <div> in another <div>?

Then, the inner diff is just moved 20 pixels to the right, using a margin.

Note that, if you leave width as auto, the width will be zero, and it might not be what you want.

Answer 2

If you know the width of the div element you want to position relative to the center, then you could do something like this:

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;
}

Result

Answer 3

You could center the div (with margin:auto) and move the content (in another div) X pixels to the right with:

   margin-right:-20px

Or just make your enclosing div 40 pixels longer and align your text to the right

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>

This works for all Bootstraps, html5 (and even in MediaWiki hell).The trick is "POSITION:RELATIVE"

You can do the same thing as CSS.

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