How to make a div center align in HTML

Question

Possible Duplicate    How to horizontally center a div        One simple way to make an object centered in HTML is using  align  center   but it s not working for a div   I tried   style  text-align center   style  left 50      I even true a center tag   lt center gt    But I can t make my target div to be center

User · Accepted Answer

x000D   x000D   lt  DOCTYPE html gt  x000D   lt html gt  x000D     lt head gt  x000D       lt title gt Center lt  title gt  x000D     lt  head gt  x000D     lt body gt  x000D   x000D       lt div style  text-align  center   gt  x000D         lt div style  width  500px  margin  0 auto  background   000  color   fff   gt This DIV is centered lt  div gt  x000D       lt  div gt  x000D   x000D     lt  body gt  x000D   lt  html gt  x000D   x000D   x000D    Tested and worked in IE  Firefox  Chrome  Safari and Opera  I did not test IE6  The outer text-align is needed for IE  Other browsers  and IE9   will work when you give the DIV margin  left and right  value of auto  Margin  0 auto  is a shorthand for margin  0 auto 0 auto   top right bottom left    Note  the text is also centered inside the inner DIV  if you want it to remain on the left side just specify text-align  left  for the inner DIV   Edit  IE 6  7  8 and 9 running on the Standards Mode will work with margins set to auto

User · Answer

it depends if your div is in position  absolute   fixed or relative   static for position  absolute  amp  fixed  lt div style  quot position  absolute    or fixed    width  50   height  300px  left  50   top 100px  margin  0 0 0 -25  quot  gt blblablbalba lt  div gt   The trick here is to have a negative margin half the width of the object for position  relative  amp  static  lt div style  quot position  relative    or static    width  50   height  300px  margin  0 auto quot  gt blblablbalba lt  div gt   for both techniques  it is imperative to set the width

User · Answer

how about something along these lines   lt style type  text css  gt     container       margin  0 auto      text-align  center     for IE            yourdiv       width  400px      border  1px solid  000       lt  style gt          lt div id  container  gt     lt div id  yourdiv  gt      weee    lt  div gt   lt  div gt

User · Answer

I think that the the align  center  aligns the content  so if you wanted to use that method  you would need to use it in a  wraper  div - a div that just wraps the rest   text-align is doing a similar sort of thing    left 50  is ignored unless you set the div s position to be something like relative or absolute   The generally accepted methods is to use the following properties  width 500px     this can be what ever unit you want  you just have to define it margin-left auto  margin-right auto    the margins being auto means they grow shrink to match the browser window  or parent div   UPDATE  Thanks to Meo for poiting this out  if you wanted to you could save time and use the short hand propery for the margin   margin 0 auto    this defines the top and bottom as 0  as it is zero it does not matter about lack of units  and the left and right get defined as  auto  You can then  if you wan t override say  the top margin as you would with any other CSS rules

[html] How to make a div center align in HTML

Examples related to html

Examples related to css