Center div horizontally

Question

On this page, I would like to horizontally center the main #container div relative to the page. Normally I would achieve this by adding a CSS rule,

#container { margin: 0 auto }

However, the layout of this page (which I did not write), uses absolute positioning for #container and most of its child elements, so this property has no effect.

Is there any way I can achieve this horizontal centering without rewriting the layout to use static positioning? I've no problem with using JavaScript/JQuery if that's the only way to achieving my objective.

Khadijahkhai

@Starx good question, I've updated my post with the answer (which is yes) – Tracitracie

in that case @rquinn has the answer for you – Crimson

FYI you would need to change the position of the #container to position:relative, which essentially you should be able to do without affecting things too much, as long as the #container is the outter most element. – Swinford

Answer 1

Same as @rquinn answer but this will adjust to any width. Check this demo

http://jsfiddle.net/Starx/V7xrF/1/

HTML:

<div id="container"></div>

CSS:

* { margin:0;padding:0; }
#container {
    width:50px;
    position:absolute;
    height:400px;
    display:block;
    background: #ccc;
}

Javascript

function setMargins() {
    width = $(window).width();
    containerWidth = $("#container").width();  
    leftMargin = (width-containerWidth)/2;    
    $("#container").css("marginLeft", leftMargin);    
}

$(document).ready(function() {
    setMargins();
    $(window).resize(function() {
        setMargins();    
    });
});

Crimson

@Don, Why haven't you accepted an answer? You liked it didn't you? :D – Crimson

Answer 2

You can use also use jQuery:

  function setMargins() {
    var width = $(window).width();
    if(width > 1024){
        var leftMargin = (width - 1024)/2;
        $("#container").css("marginLeft", leftMargin);    
    }
 }

Then I put this code after the $(document).ready event:

$(document).ready(function() {

    setMargins();

    $(window).resize(function() {
        setMargins();    
    });
});

Kabul

Answer 3

the container width is 1024px, so you can try to give a left value 50% and margin-left: -512px.

Tenuto

this wouldn't work at screen with 800px would it? or 1280, or 1360 ........ SO ON – Crimson

why not? you can try it with resizing your window. – Tenuto

it will work on larger screens, but on smaller ones, the user will not be able to see the whole image. (He won't be able to scroll them into view) – Unmanned

Answer 4

Using Javascript, this will put #container at the center of your browser's window.

document.getElementById("container").style.top= (window.innerHeight - document.getElementById("container").offsetHeight)/2 + 'px';
document.getElementById("container").style.left= (window.innerWidth - document.getElementById("container").offsetWidth)/2 + 'px';

Honkytonk

Answer 5

If your main container is using absolute position, you can use this CSS to center it horizontally;

#container {
   position:absolute;
   width:1000px;  /* adjust accordingly */
   left:50%;
   margin-left:-500px; /* this should be half of the width */
}

Dibbrun

Answer 6

It's simple. Try this

body {
    margin:50px 0px; padding:0px; /* Need to set body margin and padding to get consistency between browsers. */
    text-align:center; /* Hack for Internet Explorer 5/Windows hack. */
}

#Content {
    width:500px;
    margin:0px auto; /* Right and left margin widths set to "auto". */
    text-align:left; /* Counteract to Internet Explorer 5/Windows hack. */
    padding:15px;
    border:1px dashed #333;
    background-color:#eee;
}

Activate

But will this work if #Content and it's child elements are absolutely positioned? – Tracitracie

this will work even for child element if possible can you give me some more detail – Activate

Answer 7

This way worked best for me. Without changing margins, but the position. Required: object -> margin-left: 0; and position: relative;

check example here: jsfiddle Code:

function setObjPosition(container, object) {
    var containerWidth = $(container).width();
    var objectWidth = $(object).width();

    var position = (containerWidth / 2) - (objectWidth / 2);

    $(object).css('left', position);
}

function setPositionOnResize(container, object) {
    setObjPosition(container, object);
    $(container).resize(function () {
        setObjPosition(container, object);
    });
}

Use:

<script type="text/javascript">
    $(document).ready(function () {
        setPositionOnResize(window, "#PanelTeste");
    });
</script>

It can be centered within any container.

Ma