Centering A Division

For general web development questions that are not specifically related to CSS HTML Validator. This includes (but is not limited to) general HTML, CSS, Accessibility, JavaScript, and SEO questions.
Post Reply
paulp575
Rank IV - Intermediate
Posts: 170
Joined: Tue Aug 09, 2005 1:20 pm
Location: Spokane WA
Contact:

Centering A Division

Post by paulp575 »

I am experiencing a problem trying to center a division in an XHTML document.

HTML validator says I can not use <div align="center"> and suggests I use the style of TEXT-ALIGN: Center.

However, that only works for text.

I need to center an entire division.

What to do???

Thanks,
paulp575
User avatar
Albert Wiersch
Site Admin
Posts: 3783
Joined: Sat Dec 11, 2004 9:23 am
Location: Near Dallas, TX
Contact:

Re: Centering A Division

Post by Albert Wiersch »

I believe I've changed the referred to message to:
[82] The "align" attribute may not be used with the "div" element in a strict XHTML 1.0 document. Instead of align="center", consider using the CSS "text-align: center" instead. To center a block, use the CSS "margin-left: auto; margin-right: auto".

I added this part:
To center a block, use the CSS "margin-left: auto; margin-right: auto".

Try using the CSS "margin-left: auto; margin-right: auto". Please let me know how it works.
Albert Wiersch, CSS HTML Validator Developer • Download CSS HTML Validator FREE Trial
ardeezstyle
Rank 0 - Newcomer
Posts: 1
Joined: Tue Feb 01, 2011 1:29 am

Re: Centering A Division

Post by ardeezstyle »

Hi Albert,

when you are talking about centering the using css property margin-left/margin-right auto, it is important that you mention the width for the div as without a specified width the div will not be centered or should I say the centering of the div will not be visible.

Cheers!
User avatar
pandaa
Rank 0 - Newcomer
Posts: 2
Joined: Fri Nov 23, 2012 6:43 pm
Contact:

Re: Centering A Division

Post by pandaa »

<div align="center" /> usually works fine, but you can also do <div class="x" /> and refer to external CSS. :)
dscontroller
Rank 0 - Newcomer
Posts: 1
Joined: Wed Sep 08, 2010 4:50 pm

Re: Centering A Division

Post by dscontroller »

I entirely agree with ardeezstyle but ensure that the width of the div is less than the div it is contained within.

David
User avatar
ianinfrance
Rank 0 - Newcomer
Posts: 3
Joined: Thu Jan 24, 2013 3:35 am
Location: Forgès, Corrèze, France

Re: Centering A Division

Post by ianinfrance »

I find that for images, this little snippet can be quite useful

IMG.centred {
display: block;
margin-left: auto;
margin-right: auto;
}

Then when you want an image to be centred (I'm english, so I use English spelling sorry) in a div you just need to do

img class="centred" src="foo.bar"
As a division is defined as a block normally, then if I want it to be centred in some kind of container (body or article or another division) I automatically add
margin-left: auto;
margin-right: auto
to the division's definition.

Though as ardeezstyle says, the width has to be specified one way or another. In a vague attempt to keep the page legible in a variety of viewport dimensions, I tend to use width: xx%; as well.
Post Reply