CODEWITHSUNDEEP
htmlcss
thr
thr

Reputation: 33

Text align in span

Hello is there a simple way to align text inside span? I found several solutions but nothing seems to work for me. Here is my code:

 <?php echo Yii::t('default','Tax Amount').': ';?>
          <span style="border-bottom: 1px solid; ">
            <?php echo Yii::app()->locale->numberFormatter->formatCurrency($taxamount, 'EUR');?>
        </span>
    </span>

All I want is to align the $taxamount to the right and leave Tax Amount to the left as is. I thought it was pretty easy at first but nothing works! I also tried it with div and it worked but it messes with anything I have below that. I have three more echo’s like this below that code. I'm not very proficient with CSS and I would appreciate any help. My full code is something like this:

<?php echo Yii::t('default','Amount').': ';?>
    <span style="border-bottom: 1px solid;">
        <?php echo Yii::app()->locale->numberFormatter->formatCurrency($model->credit, 'EUR');?>
    </span>
<br>

        <?php echo Yii::t('default','Tax').': 23%';?>
<br>
<?php echo Yii::t('default','Tax Amount').': ';?>
      <span style="border-bottom: 1px solid; ">
        <?php echo Yii::app()->locale->numberFormatter->formatCurrency($taxamount, 'EUR');?>
    </span>
</span>
    <br>
<?php echo Yii::t('default','Total').': ';?>
    <span style="border-bottom: 1px solid;">
        <?php echo Yii::app()->locale->numberFormatter->formatCurrency($total, 'EUR');?>
    </span>

I comment out everything and I only used one solution as suggested below. So my code now is like this:

p>span {
display: inline-block;
width: 50%;
}
p>span:last-child {
  text-align: right;
}
.pull-left {
    float: left;
}

.pull-right {
    float: right;
}
<p><span>Tax Amount</span><span>EUR 12.50</span></p>

I use mpdf extension in Yii to print the results in pdf. So this is all my code now plus the mpdf extension.But still nothing happens!

Upvotes: 0

Views: 4838

Answers (2)

brae
brae

Reputation: 1122

If your left-aligned text is inside another element (like my <div> below), you should be able to add the 'float:right' CSS style to your <span>.

<div>
     Left-hand text <span style="float:right">Right-hand text</span>
</div>

float is typically used for images, but it can be used with span tags. It works by literally floating your <span> tag to the right edge of your containing element.

This should give you the behavior you're looking for, but you can also check out this question. It looks like they're trying to accomplish something similar.

Upvotes: 0

GreyRoofPigeon
GreyRoofPigeon

Reputation: 18113

A <span> is an inline element, the text align will work, but you'll need to give the element a width (which won't work, while its an inline element).

There are a few ways to do it, one is to display them as inline blocks inside a paragraph:

p>span {
  display: inline-block;
  width: 50%;
}
p>span:last-child {
  text-align: right;
}
<p><span>Tax Amount</span><span>EUR 12.50</span></p>

Another way is to float them: (but I personally prefer the first method)

p>span {
  display: block;
  float: left;
  width: 50%;
}
p>span:last-child {
  text-align: right;
  float: right;
}
<p><span>Tax Amount</span><span>EUR 12.50</span></p>

Upvotes: 3

Related Questions