Having trouble with aligning text using the span tag?

Question

Having trouble with aligning text using the span tag?

I'm attempting to create a line for pricing where the text-align is aligned differently for each item - left, center, and right.

Despite using text-align, I am unable to maintain all three items on the same line. Is there an alternative solution or workaround for this issue?

Initially, I approached it like this:

.price span {
  display: inline;
}

.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>

html css

Answer 1

Answer №1

 is considered an inline element, meaning it will take on the width of its content. On the other hand,  is a block element, thus its width will always be that of its parent container. Consequently, applying text-align: center will only center align the  elements within the .

If you wish to have one item aligned left, another in the center, and a third item on the right side,

You can utilize the flex method mentioned above, which will position everything towards the edges.
Alternatively, you can set the display to inline-block and specify width percentages in your CSS. Moreover, after setting it to inline-block with a fixed width, you can apply text-align center inside.

Answer 2

 is considered an inline element, meaning it will take on the width of its content. On the other hand,  is a block element, thus its width will always be that of its parent container. Consequently, applying text-align: center will only center align the  elements within the .

If you wish to have one item aligned left, another in the center, and a third item on the right side,

You can utilize the flex method mentioned above, which will position everything towards the edges.
Alternatively, you can set the display to inline-block and specify width percentages in your CSS. Moreover, after setting it to inline-block with a fixed width, you can apply text-align center inside.

Answer 3

Answer №2

Check out my response on the issue with CSS text-align not working

    .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>

Additionally, it's important to ensure your HTML is correct. Using

<span class="present-price">Tk. 227500</p>

is considered invalid code. Even though most browsers may be forgiving, it's best practice to strive for accuracy in your coding.

Answer 4

Check out my response on the issue with CSS text-align not working

    .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>

Additionally, it's important to ensure your HTML is correct. Using

<span class="present-price">Tk. 227500</p>

is considered invalid code. Even though most browsers may be forgiving, it's best practice to strive for accuracy in your coding.

Answer 5

Answer №3

An easy fix is to transform the .price element into a flex-container using these 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>

(By the way: You mistakenly closed your  tags with closing  tags - I corrected it in my fiddle)

Answer 6

An easy fix is to transform the .price element into a flex-container using these 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>

(By the way: You mistakenly closed your  tags with closing  tags - I corrected it in my fiddle)

Answer 7

Answer №4

It is recommended to avoid using display:inline for the .price span and instead assign it a fixed width, either in pixels (px) or as a percentage.

For example:

  .price{
    width:100%;
  }
  .price span {
        display: inline-block; /* also experiment 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>

Answer 8

It is recommended to avoid using display:inline for the .price span and instead assign it a fixed width, either in pixels (px) or as a percentage.

For example:

  .price{
    width:100%;
  }
  .price span {
        display: inline-block; /* also experiment 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>

Having trouble with aligning text using the span tag?

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

A situation where the event onclick fails to occur within NextJS

Troubleshooting: Django project not functioning properly post transfer from Windows to Mac

Optimizing Title Tags for Static Pages with Header Inclusion

Adjust the dimensions of the initial cell

How to hide offcanvas navigation bar with one click in Bootstrap 5

What exactly is the significance of "hash" in terms of Internet Explorer style

Utilizing React JSX within HTML structures

The margin-top property in CSS is not functioning as intended for a specific pixel value when applied to

Having issues with Inline-Block functionality?

What is the best method for adding a background image to a jumbotron in my Django project?

Tips on embedding an HTML page within another HTML page by utilizing a custom directive in AngularJS

Bizarre actions with jQuery append in Internet Explorer 8

Tips for utilizing the font-family style to span multiple columns

Passing dynamic scope from Angular to a directive is a seamless process

6 Steps to Extract Data from a POST Request Using JavaScript

Retrieve the file name of the webpage from the URL bar

Need inspiration for testing web content with Protractor?

The overflow of CSS text selection color spills beyond the boundaries of the box

Control the button's activation status by accepting or unaccepting the two checkbox conditions

Creating a CSS template for organizing sidebar and footer divisions on a webpage