3

Possible Duplicate:
How can I center something if I don't know ahead of time what the width is?

I want to know how to align a div tag withought knowing a width. This is different to other questions as I would not mind using the <center> tag but it seems to be 'old' in the HTML groups view. Will the <center> tag still be working in the future?

Thanks

Community
  • 1
  • 1
William Burnside
  • 59
  • 10
  • Please check "Related" section at the bottom right. Your question was asked numerous times. http://stackoverflow.com/questions/963823/how-can-i-center-something-if-i-dont-know-ahead-of-time-what-the-width-is – bezmax Nov 18 '11 at 07:56
  • @Max Do you know if the center tag will work in the future though? – William Burnside Nov 18 '11 at 07:58
  • http://www.w3.org/TR/REC-html40/present/graphics.html#h-15.1.2 – Roko C. Buljan Nov 18 '11 at 08:00
  • 2
    `
    ` is deprecated, but `text-align:center;` CSS style (should) have an identical effect.
     – JJJ Nov 18 '11 at 08:02
  • check this why not use
    http://stackoverflow.com/questions/1798817/why-is-the-center-tag-deprecated-in-html
     – sandeep Nov 18 '11 at 10:24

3 Answers3

6

I usually use width:auto or width:100% than margin:0 auto;

However you can see the details on the link below as its almost the same question as yours!

How can I center align a div without knowing the width?

Community
  • 1
  • 1
Code Lover
  • 8,099
  • 20
  • 84
  • 154
3

Blocks elements are centered by setting left and right margins to auto. 

margin-left: auto;
margin-right: auto;

<center> work continue to work for the foreseeable future, so there is no technical reason not to use it, however in modern web development one should acknowledge the principle of "separation of presentation and content" and use HTML for semantics and CSS for layout.

RoToRa
  • 37,635
  • 12
  • 69
  • 105
  • You can also use the shorthand `margin: 0 auto;` – Andreas Eriksson Nov 18 '11 at 09:56
  • check this why not use center http://stackoverflow.com/questions/1798817/why-is-the-center-tag-deprecated-in-html – sandeep Nov 18 '11 at 10:24
  • @sandeep: I don't understand what you want to say with that comment. The whole problem with `
    ` is that it mixed up block and text centering. That's why it was "split up" into `margin: auto` (for blocks) and `text-align: center` (for text), and using `text-align` with hacks to center blocks is wrong.
     – RoToRa Nov 18 '11 at 10:30
1

write like this:

#parent {
    text-align:center;
}
.child {
    display:inline-block;
    *display:inline /* IE */
    *zoom:1;/* IE */
    text-align:left;
}

Check this

http://jsfiddle.net/efEgq/2/

sandeep
  • 91,313
  • 23
  • 137
  • 155
  • `text-align` is for aligning text (hence the name). – RoToRa Nov 18 '11 at 09:48
  • hey @RoToRa; who said text-align is only for aligning text. It's also align inline TAGS also for example , etc. – sandeep Nov 18 '11 at 09:53
  • There is no bad mark-up & not any bad css. – sandeep Nov 18 '11 at 09:55
  • 1
    +1 display:inline-block; – Moe Sweet Nov 18 '11 at 09:55
  • 1
    W3C does. Centering a block and centering running text are two completely different concepts. – RoToRa Nov 18 '11 at 09:58
  • @Moe Sweet: What is "good" about inline-block in this context? This is unnecessarily complicated and demonstrates misunderstanding of basic CSS concepts. – RoToRa Nov 18 '11 at 10:02
  • -1. OP wants to align the entire DIV, not the text (and inline elements) inside of it. – Madara's Ghost Nov 18 '11 at 10:03
  • @Truth; i am not aligning the text-center i align div center because OP wants DIV center with unknown width these called tricks for example check this http://jsfiddle.net/qCTj8/ – sandeep Nov 18 '11 at 10:06
  • I misunderstood your answer, but now that I read it, the -1 still stands. text-aligning the parent may affect other elements in the page. While it's a good solution in some cases, it's not robust and will fail on many others. – Madara's Ghost Nov 18 '11 at 10:09
  • that's why i give define text-align:left in the child – sandeep Nov 18 '11 at 10:11
  • @RoToRa What good about inline-block is you can align an unknown-width block level element within an unknown-width container while keeping the static flow of elements, i.e; not begin absolutely positioned. Every approach have their pros and cons. – Moe Sweet Nov 18 '11 at 11:17