How to align a
to center of the page

Question

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

I have a div tag with hight set to 800px, I want that when the browser width is greater than 600px it shouldn't stretch the div but it should bring it to the middle of the page

How can I achieve this?

can I use the following code? centered content

you can try margin: auto, but be advised this wont work well in all browsers esp. IE — redDevil, Mar 14 '12 at 07:21
Off-topic, but I could not help sharing this: https://youtu.be/91TCgj_pQ98?t=3m — DaveTheMinion, Jan 06 '18 at 05:43

score 1 · Answer 1 · answered Mar 14 '12 at 07:18

Short Answer:

with margin set to auto

<html>
<head><title>Your Title</title></head>
<body>
<div style="width:600px; margin:auto; border:1px solid red">
</div>
</body>
</html>

Long answer:

You might want to set an id for that div, and give appropriate css selector with the rules rather than using inline style like that.

Also, for that to work correctly in ie 6 and 7, you need to give the doctype declaration, otherwise it won't work because ie will work in quirks mode http://www.satzansatz.de/cssd/quirksmode.html

So the complete answer should look like

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
       <title>Your Title</title>
       <style>#container { width:600px; margin:auto; border:1px solid red }</style>
    </head>
    <body>
       <div id="container">
       </div>
    </body>
    </html>

Yes you can, 0 auto just means margin 0 for top and bottom, auto for left and right. — Andreas Wong, Mar 14 '12 at 07:28

score 0 · Answer 2 · answered Mar 14 '12 at 07:18

0

put in the css the following properites :

max-width:600px;
position:relative;
margin:auto;

one thing I am not clear is do you want the div to take the width of the browser if the browser width is less than 600px?

answered Mar 14 '12 at 07:18

Tejasva Dhyani

1,342
1
10
19

position is relative by default – redDevil Mar 14 '12 at 07:22
actually position is parent's position by default. We dont know exactly where the div is present – Tejasva Dhyani Mar 14 '12 at 07:24
can I use the following code?
centered content
– chetan Mar 14 '12 at 07:26
1

I have to disagree, position is `static` by default, that's why you need to explicitly define `position:relative` before `top:` and `left:` takes effect – Andreas Wong Mar 14 '12 at 07:29
@chetan yes you can, since height of the body will take the full height of the div there will be not much difference in the two margin declarations..... but do you want width to be 800px or 600px? – Tejasva Dhyani Mar 14 '12 at 07:31
@andreas tnx man...I was about to post that http://www.w3schools.com/jsref/prop_style_position.asp – Tejasva Dhyani Mar 14 '12 at 07:32

How to align a to center of the page

2 Answers2

How to align a
to center of the page