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,
Centering A Division
-
- Rank IV - Intermediate
- Posts: 170
- Joined: Tue Aug 09, 2005 1:20 pm
- Location: Spokane WA
Centering A Division
paulp575
-
- Site Admin
- Posts: 3785
- Joined: Sat Dec 11, 2004 9:23 am
- Location: Near Dallas, TX
Re: Centering A Division
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.
[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
-
- Rank 0 - Newcomer
- Posts: 1
- Joined: Tue Feb 01, 2011 1:29 am
Re: Centering A Division
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!
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!
-
- Rank 0 - Newcomer
- Posts: 2
- Joined: Fri Nov 23, 2012 6:43 pm
Re: Centering A Division
<div align="center" /> usually works fine, but you can also do <div class="x" /> and refer to external CSS.
-
- Rank 0 - Newcomer
- Posts: 1
- Joined: Wed Sep 08, 2010 4:50 pm
Re: Centering A Division
I entirely agree with ardeezstyle but ensure that the width of the div is less than the div it is contained within.
David
David
-
- Rank 0 - Newcomer
- Posts: 3
- Joined: Thu Jan 24, 2013 3:35 am
- Location: Forgès, Corrèze, France
Re: Centering A Division
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.
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.