Difference between span and div with text-align center

Question

I don t understand this   I have tried to center the text-align of a HTML  lt span gt  tag but it did nothing    With the  lt div gt  tag  everything worked  Same sittuation with setting margin  0px auto  in css   Why does the span tag not support the text-align  function

User · Answer

Spans are inline  divs are block elements  i e  spans are only as wide as their respective content  You can align the span inside the surrounding container  if it s a block container   but you can t align the content   Span is primarily used for formatting purposes  If you want to arrange or position the contents  use div  p or some other block element

User · Answer

Like other have said  span is an in-line element   See here  http   www w3 org TR CSS2 visuren html  Additionally  you can make a span behave like a div by applying a   style  display  block  margin  0px auto  text-align  center

User · Answer

Span is considered an in-line element   As such is basically constrains itself to the content within it   It more or less is transparent   Think of it having the behavior of the  b  tag   It can be performed like  lt span style  font-weight  bold   gt bold text lt  span gt   div is a block element

User · Answer

It might be  because your span element sets is side as width as its content  if you have a div with 500px width and text-align center  and you enter a span tag it should be aligned in the center  So your problem might be a CSS one  Install Firebug at Firefox and check the style attributes your span or div object has

User · Answer

the difference is not between  lt span gt  and  lt div gt  specifically  but between inline and block elements   lt span gt  defaults to being display inline  whereas  lt div gt  defaults to being display block   But these can be overridden in CSS   The difference in the way text-align center works between the two is down to the width   A block element defaults to being the width of its container  It can have its width set using CSS  but either way it is a fixed width   An inline element takes its width from the size of its content text   text-align center tells the text to position itself centrally in the element  But in an inline element  this is clearly not going to have any effect because the element is the same width as the text  aligning it one way or the other is meaningless   In a block element  because the element s width is independent of the content  the content can be positioned within the element using the text-align style   Finally  a solution for you   There is an additional value for the display property which provides a half-way house between block and inline  Conveniently enough  it s called inline-block  If you specify a  lt span gt  to be display inline-block  in the CSS  it will continue to work as an inline element but will take on some of the properties of a block as well  such as the ability to specify a width  Once you specify a width for it  you will be able to center the text within that width using text-align center   Hope that helps

User · Answer

A span tag is only as wide as its contents  so there is no  center  of a span tag   There is no extra space on either side of the content   A div tag  however  is as wide as its containing element  so the content of that div can be centered using any extra space that the content doesn t take up   So if your div is 100px width and your content only takes 50px  the browser will divide the remaining 50px by 2 and pad 25px on each side of your content to center it

[css] Difference between <span> and <div> with text-align:center;?

Examples related to css

Examples related to html

Examples related to text-alignment