5

I'm trying to align a 'div' attribute to the center of the page (horizontally). The problem is that whatever attributes I've used, the 'div' continues to be aligned to left. The 'div' which I am reffering to, is the page 'div' of the webpage, which is inside the 'html' and the 'body' attributes. Here's the CSS code:

#page{
    margin-top:20px;
    margin-bottom:20px;
    margin-left: auto;
    margin-right:auto;

    border-color: black;
    border-style: solid;
    border-width: thin;

    overflow:auto;

    padding-bottom: 10px;
    padding-top: 0px;

    width:1200px;
    background-color:#ffffff;
    font-family:Arial, Helvetica, sans-serif;
    color:black;
    font-size:12px;    
    height:700px;
}

and the 'html', 'body' CSS code is the following:

html,body {
    background-color:#FFFFFF;
    margin-left: auto;
    margin-right: auto;
}

Note that if I remove the "overflow" property, the div is aligned to the center of the page (although, it overlays the menu which is on top of it) but I need the "overflow" property to automatically add scrollbars if the width/height of the page which would be displayed inside this div is greater than those specified in the CSS.

3
  • 1
    Have you tried "0 auto" instead of just auto as margin parameter?
    – Sven Rojek
    May 18, 2013 at 12:49
  • Show your full code in jsfiddle plz
    – ShibinRagh
    May 18, 2013 at 12:57
  • Yes, I have tried 0 auto but it didn't help either... May 18, 2013 at 14:34

6 Answers 6

4

I haven't coded anything in awhile, however normally when I am creating a centered page:

html, body { width: 100%; height: 100%; margin: 0 auto; text-align: center; }

Then for the div:

#page { width: 900px; overflow: hidden; text-align: left; margin: 20px 0 20px 0; }

That may or may not work, like I said, it has been awhile.

3

It seems your div is filling full screen width. So center alignment will not have any visible effect on the div. Try to use a span instead.

Following will NOT work

<body style="text-align:center">
  <div>Foo</div>
</body>

Following should work

<div style="text-align:center">
  <span>Foo</span>
</body>

0
2

In order to margin:auto works in your case is required to have a defined width/height for your main containers which are HTML and BODY

IMPORTANT:Both HTML and BODY elements must be ruled with the width/height properties

Do as follows

html,body {
    background-color:#FFFFFF;
   width:100%;
    height:100%;
}

and watch this fiddle

1
<div style="margin:0px auto;">sfsfsafafas</div>

Use this code surely it will make the div to center.

0

Simple:

HTML

<div id="page"></div>

CSS

#page {
  width: 350px; height: 400px; border: 1px solid #000; margin: auto
}

jsFiddle example

0

You might also look at the "left" and "right" attributes for centering a if you are trying to center horizontally.

For instance, if your width was 60% of the page (width:60%), you could set (left:20%) and (right:20%) which MAY center it, however that depends on how your div is positioned. (position:absolute) or (position:relative).

(position:absolute) with the above width, left, and right should center horizontally.

There is also <center> enter code </center> within HTML that has worked for me in the past.

I'm not a guru with this though, so I don't know what "best practice" to use in your case.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.