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

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 }