Difference Between <Span> and <Div> with Text-Align:Center;

Difference between span and div with text-align:center;?

the difference is not between <span> and <div> specifically, but between inline and block elements. <span> defaults to being display:inline; whereas <div> 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 <span> 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.

Is there a way to make the span go to the center of document

Just add display block:

span {
    text-align:center;
    display:block;
}

The text-align: center isn't working in a span element

The <span> Element is, by default, an "inline" element. Meaning unlike block level elements (<div> <h1> <p> etc.) the span only takes up as much horizontal space as its content.

text-align: center IS working, but you're applying it to an element that doesn't have a width greater than its content (as all block elements do).

I recommend either changing the span to a <p> element, or specifying the display: block property on your span.

Here's a JSfiddle to demonstrate that both a <span> with display: block; text-align: center and a <p> with text-align: center; achieve the same effect.

Hope that helps!

Center a div or span while between other spans

The best way is to put text-align: center to the parent div:

div {  text-align: center;}div>span:first-child {  float: left;}div>span:nth-child(3) {  float: right;}

<div>  <span>Left</span>  <span>Center</span>  <span>Right</span></div>

Confused about using SPAN vs DIV and natural flow

To accomplish this you will want to use media queries.

CSS:

.led {
   height: 20px;
   width: 20px;
   border: 2px solid black;
   border-radius: 20px;
   margin: 40px 60px 20px 60px;
   background: #f2ffe6;
   position: relative;
   display: inline-block;
}

@media (max-width: 400px) {
   .led {
     display: block; 
   }
}

.led_caption {
    width: 700%;
    text-align: center;
    position: absolute;
    display: inline-block;
    top: 30px;
    left: -300%;    
}

HTML:

<div style=" width: 500px; height: 100px; margin: 0 auto; ">
    <div class="led">
        <span class="led_caption"> Caption </span>
    </div>
    <div class="led">
        <span class="led_caption"> Caption </span>
    </div>
    <div class="led">
        <span class="led_caption"> Caption </span>
    </div>
</div>

Center align span text inside a div

You are giving the span a 100% width resulting in it expanding to the size of the parent. This means you can’t center-align it, as there is no room to move it.

You could give the span a set width, then add the margin:0 auto again. This would center-align it.

.left 
{
   background-color: #999999;
   height: 50px;
   width: 24.5%;
}
span.panelTitleTxt 
{
   display:block;
   width:100px;
   height: 100%;
   margin: 0 auto;
}

Difference between div and span

There is two differences between div and span elements:

The div has display:block as default, while span has display:inline as default.
The div is a block element, and can contain block elements and inline elements, while span is an inline element and can only contain other inline elements.

Once you have applied the display:inline-block they behave the same.

When the HTML code is parsed, the style is not considered. While you can change the display style to make the elements behave the same, you still have to follow the rules in the HTML code.

This for example is valid:

<div>
  <div>
    <span></span>
  </div>
  <span></span>
</div>

This for example is invalid:

<span>
  <div>
    <span></span>
  </div>
  <div></div>
</span>

The browser will try to rearrange the elements in the invalid code, which usually means that it moves the div elements outside the span elements. As the HTML specification (prior to version 5) only told how correct code should be handled, each browser has its own way of dealing with incorrect code.

Aligning text to the left, middle, right using span, text align, and inline-block, CSS, HTML

To get them all on the same line you don't need the spans I suggested in your last question, but you do need to change the order of the divs. Then you just float the left and right elements to their respective sides.

#outer {  border: 1px solid black;  width: 500px;  height: 500px;  text-align: center;}#innerLeft {  float: left;  border: 1px solid black;}#innerMiddle {  border: 1px solid black;  display: inline-block;}#innerRight {  float: right;  border: 1px solid black;}

<div id='outer'>  <div id='innerLeft'>Left</div>  <div id='innerRight'>Right</div>
  <div id='innerMiddle'>Middle</div></div>

why is there a difference if I add a class to a span tag as opposed to a div tag?

<div /> is a block level element, which takes up 100 % of the available width by default. <span /> is an inline element, which only takes up the minimum amount of width it needs to display its content.

There's a really good article on learnlayout.com that does a great job explaining this.

Happy coding :)

Difference Between <Span> and <Div> with Text-Align:Center;