CODEWITHSUNDEEP
csshtmlalignment
Lefteris008
Lefteris008

Reputation: 907

Can't align <div> to center

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.

Upvotes: 5

Views: 26238

Answers (6)

GaneshKumar
GaneshKumar

Reputation: 159

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

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

Upvotes: 1

Andrew Manson
Andrew Manson

Reputation: 280

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.

Upvotes: 4

Aaron Medacco
Aaron Medacco

Reputation: 2975

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.

Upvotes: 0

user2396441
user2396441

Reputation:

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>

Upvotes: 3

Fico
Fico

Reputation: 2407

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

Upvotes: 2

A. Cristian Nogueira
A. Cristian Nogueira

Reputation: 735

Simple:

HTML

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

CSS

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

jsFiddle example

Upvotes: 0

Related Questions