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.

score 17 · Accepted Answer · edited May 23 '17 at 10:30

17

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.

edited May 23 '17 at 10:30

Community

1
1

answered Jul 21 '11 at 23:27

Denilson Sá Maia

47,466
33
109
111

thanks +1. this saved me a real issue when normalising popup info bubble positions on different screen resolutions. – jim tollan Jun 27 '14 at 11:36
Note that this only works if you need to move the content to the right, thereby it won't work if you want to move it to the left. You can fix that by using a negative left margin, but that breaks scrolling. – vallentin Mar 18 '15 at 11:45
If you are aiming for modern browsers, you may want to take a look at `transform: translate(-50%, -50%);` trick shown here: https://css-tricks.com/quick-css-trick-how-to-center-an-object-exactly-in-the-center/ – Denilson Sá Maia May 30 '15 at 15:40

Hristo · Answer 2 · 2016-06-24T18:39:08.127

9

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

edited Jun 24 '16 at 18:39

answered Jul 21 '11 at 23:27

Hristo

45,559
65
163
230

1

This is the right solution. You pretty much nailed it: simple, elegant, and unlike all the others, maintains the separation of content and presentation. Good job. – SMBiggs Feb 17 '14 at 19:29
1

This should be the accepted anwser, by far the cleanest solution – Sonic750 Jun 23 '16 at 18:35

score 1 · Answer 3 · answered Nov 07 '16 at 02:31

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

score 1 · Answer 4 · answered Jul 21 '11 at 23:12

1

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

answered Jul 21 '11 at 23:12

marioBonales

91
2
6

score 0 · Answer 5 · answered May 27 '13 at 18:31

Use this code:

<!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>

Result:
enter image description here

Offset div from center

5 Answers5

Linked