How to move an entire group of objects with Javascript

Question

I am trying to move everything contained within the div id "tile", to the center of the web browser. By default the CSS is undefined and it appears on the left side of the browser. What I would like to do is move the entire div to the center using javascript when the button "move" is clicked.

The html is shown directly below, and the attempted (but not working) javascript is shown below that.

html

<div id="tile">
    <div class="menu">
        <ul>
            <li><a href="#" title="" id="tab4"> Vis </a></li>
        </ul>
    </div>
    <div id="tabcontent4">Some generic content</div>    
        <button onclick="move();" type="button">Move</button>
    </div>
</div>

javascript

document.getElementsById("tile").style.align='center';

EDIT: How would I move the div to a specific location?

Answer 1

There is no "align" property in CSS. The closest is text-align, but you probably want to use the CSS declaration margin: 0 auto, which will move the whole <div> to the center of the page. So you want:

document.getElementById("tile").style.margin="0 auto";

Make sure that tile has a specified width.

Answer 2

You can do this with just CSS:

<div id="tile" style='margin:0 auto;width:300px'>
    ...
</div>

Or, put it in a container, and center its content:

<div id='container' style='text-align:center'>
  <div id='tile' style='width:300px'>
    ...
  </div>
</div>

Of course, non-inline styles are preferred.

Nice username, BTW.

// EDIT

To place the div in a specific location with javascript:

document.getElementById('tile').style.position = "absolute";
document.getElementById('tile').style.left = "100px";
document.getElementById('tile').style.top = "100px";

It must have a position defined, usually absolute or relative.

Once again, this can - and usually should - be done with CSS:

#tile { position:absolute; left:100px; top:100px }