Offset div from center

Asked 21/7, 2011 at 23:6 Answered 7/11, 2016 at 2:31

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.

Fullmer answered 21/7, 2011 at 23:6 Comment(0)

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.

Panfish answered 21/7, 2011 at 23:27 Comment(3)

thanks +1. this saved me a real issue when normalising popup info bubble positions on different screen resolutions. – Pigment 27/6, 2014 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. – Abominate 18/3, 2015 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: css-tricks.com/… – Detribalize 30/5, 2015 at 15:40

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

Contrarious answered 21/7, 2011 at 23:27 Comment(2)

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. – Advantageous 17/2, 2014 at 19:29

This should be the accepted anwser, by far the cleanest solution – Spiry 23/6, 2016 at 18:35

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

Stingo answered 7/11, 2016 at 2:31 Comment(0)

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

Freddyfredek answered 21/7, 2011 at 23:6 Comment(0)

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

Perpendicular answered 27/5, 2013 at 18:31 Comment(0)

Recommended topics

Hot tags