CODEWITHSUNDEEP
htmlcss
ramzan00
ramzan00

Reputation: 153

span tag text-align not working

I'm trying to make a line for price and I want the text-align like the first one on the left, second one on the center and the third one will be on right.

Normally the text-align works but I can't keep all three of them in them in the same line. Should I use something different? or there's a solution for this!?

First I tried like this:

.price span {
  display: inline;
  /* also tried with block and inline-block */
}

.previous-price {
  text-align: left;
}

.present-price {
  text-align: center;
}

.discount-price {
  text-align: right;
}
<p class="price">
  <span class="previous-price"><s>Tk. 350000</s></span>
			<span class="present-price">Tk. 227500</span>
			<span class="discount-price">(35% OFF)</span>
		</p>

Upvotes: 1

Views: 3217

Answers (4)

Sandra Willford
Sandra Willford

Reputation: 3789

<span> is an inline element and so it inherits the width of it's content. <p> is a block element so it's width is always the size of it's parent container. For this reason text-align: center will only align the <span> elements grouped into the center of <p>.

If the desired outcome is to have one all the way to the left, one item in the center, and one item right,

  1. You can use the flex solution above, which will push everything to the corners.

  2. You can set the display to inline-block and set the width percentages in your css. Additionally, once set to inline-block with a set width, you can text-align center within that.

Upvotes: 2

Valerio Emanuele
Valerio Emanuele

Reputation: 979

You need to NOT use display:inline for .price span and give it a width either fixed (like px) or in percentage.

E.g:

  .price{
    width:100%;
  }
  .price span {
        display: inline-block; /* also tried with block and inline-block */
        width:150px;
    }
    .previous-price {
        text-align: left;
    }
    .present-price {
        text-align: center;
    }
    .discount-price {
        text-align: right;
    } 
    <p class="price">
        <span class="previous-price"><s>Tk. 350000</s></span>
        <span class="present-price">Tk. 227500</span>
        <span class="discount-price">(35% OFF)</span>
    </p>

Upvotes: 0

phil
phil

Reputation: 456

See my answer for CSS text-align does not work 

    .previous-price {
        float: left;
    }
    .present-price {
        text-align: center;
    }
    .discount-price {
        float:right;
    } 
    <p class="price">
        <span class="previous-price"><s>Tk. 350000</s></span>
        <span class="discount-price">(35% OFF)</span>
        <div class="present-price">Tk. 227500</div>
        
    </p>

Plus you should really try to write correct html. <span class="present-price">Tk. 227500</p> is certainly invalid. Just because most browsers give you a lot of leeway, you should try nevertheless to write correct code.

Upvotes: 1

Johannes
Johannes

Reputation: 67799

A simple solution is to make the .price element a flex-container with the following settings:

.price {
  display: flex;
  justify-content: space-between;
}
<p class="price">
  <span class="previous-price"><s>Tk. 350000</s></span>
  <span class="present-price">Tk. 227500</span>
  <span class="discount-price">(35% OFF)</span>
</p>

(BTW: You closed your <span> tags with closing </p> tags - I changed that in my fiddle)

Upvotes: 1

Related Questions