Javascript Center

Question

Possible Duplicate:
How to align a <div> to the middle of the page

This is a simple question with what should be a simple answer but I don't know how to do it.

Well, use this code:

<html>
<head>
     <style type="text/css">
     body{
         min-width: 710px;
     }
     #backdrop{
         min-width: 710px;
         max-width: 710px;
     }
     </style
</head><body>

<div id="backdrop">
</div>

</body></html>

How do you get #backdrop to center on page load and stay centered on the page when you resize? (until you resize to less than 710px wide, then the horizontal scroll bar would appear)

Knowing this information would improve the layout quality of my page immensly and I could probably do it if I had a more adept knowledge of javascript and jQuery... but I don't yet.

Is it so hard to use google with two words? The first result is even on stackoverflow.com! Hint: use jquery center. — yan.kun, Sep 27 '11 at 07:53
I looked about a year ago and didn't find anything, I was just motivated to search for an answer by a problem I was having with my website but I didn't feel like searching again because I wasn't even sure if I'd find an answer this time. In my experience the best option is usually just to ask the people here on stackoverflow rather than consulting google and wading through several pages of outdated information and varying opinions on how to solve simple problems. — Mark Kramer, Sep 27 '11 at 08:08

score 2 · Answer 1 · edited May 23 '17 at 11:47

2

You don't need javascript to do this, just try:

<html>
<head>
     <style type="text/css">
     body{
         min-width: 710px;
     }
     #backdrop{
         width:710px; 
         margin:0 auto;
     }
     </style
</head><body>

<div id="backdrop">
</div>

</body></html>

[EDIT] This was already answered on stackoverflow: How to align a <div> to the middle (horizontally/width) of the page

edited May 23 '17 at 11:47

Community

1
1

answered Sep 27 '11 at 07:54

JMax

26,109
12
69
88

BTW, you can check it works here - http://jsbin.com/ebutuk/edit#html,live – NilColor Sep 27 '11 at 08:04

score 2 · Accepted Answer · answered Sep 27 '11 at 07:55

2

If all you need is to have the #backdrop div centered horizontally, there is no need for javascript. The whole thing can be achieved through CSS.

#backdrop{ 
    display:block;
    width: 710px;  //just specify the width. no need for min-width or max-width if this is not meant to change.
    margin: 0 auto; //this will center the div in its container
}

answered Sep 27 '11 at 07:55

Andri

1,503
13
20

You don't need to set `display:block` - it is already... – NilColor Sep 27 '11 at 08:01
1

If this is a div, and has not been previously modified, you are of course correct. But for margin:0 auto to work correctly, the element must be rendered as block level, hence the display:block. It might be overkill in this case, but I have made it a practise to always specify the display property when doing positioning, regardless of what the element's original rendering level might be. In the long run it has saved me a lot of headaches. – Andri Sep 27 '11 at 08:08
Wow, I can't believe I didn't think of that. Sometimes the answers are so obvious =/ – Mark Kramer Sep 27 '11 at 08:10
@Andri yep, you are right. Never saw any reset css that makes `div` inline but i like your point. Thanks! – NilColor Sep 27 '11 at 12:45

score 1 · Answer 3 · answered Sep 27 '11 at 07:55

1

I'm not really sure about what you want, but:

#backdrop{
   width:710px;
   margin: 0 auto;
}

answered Sep 27 '11 at 07:55

rgin

2,291
4
24
32

Javascript Center

3 Answers3