CSS with Javascript

Question

I would like to do something like this, but it's doesn't work

 window.onresize = center;
 function center() 
 {
 var x=window.innerWidth;
 x = x/2;
 document.getElementById("center_div").style.marginLeft = x;
 }

How can I do it?

• Lee Taylor: Please define what "doesn't work" means.
• eggy: What are you trying to do with your code? Can you explain it?
• lukeocom: as far as I know, that is an invalid function call, you need to include the brackets, ie center();. You may have to create an event listener for the window resize too.

Answer 1

you have to add px, Element.style.marginLeft do not accept numbers. It should be valid CSS property (margin-left) value; It can be 10px or 5% or auto;

document.getElementById("center_div").style.marginLeft = x + 'px';

Answer 2

Your code is fine, but missing one thing. You have to put "px" after the X variable. In other word, it should be: document.getElementById("center_div").style.marginLeft = x+"px"; Otherwise, the browser will not know its unit.

I made a sample in jsfiddle, this would be a working example. Try it. http://jsfiddle.net/TLPak/

PS. I've updated the code to include the window.onresize in it. (And some improvement, the DIV's width considered.) http://jsfiddle.net/TLPak/1/ Trigger it by click event or on window resize event are both OK. Hope it has some help to you.

function center() {
 var x=window.innerWidth; 
 x = x/2;
 var y = document.getElementById("center_div").offsetWidth;
 y = y/2;
 document.getElementById("center_div").style.marginLeft = x - y + "px"; 
}
window.onresize = center;

• Cody Guldner: This doesn't center the object, it puts the top left corner of the object into the center. You need to update the margin left
• AYoiS: OK, I revised the code. It will work on window resize event now.

Answer 3

I think what you're looking for is the css property margin: auto . Random example (not mine): http://bluerobot.com/web/css/center1.html . Additonally, you'll want width: 50% . Is that what you're looking for? Let me know, and I'll change my answer if need be. :)

• Cody Guldner: He wants to use javascript