Text align in span

Question

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!

score 2 · Answer 1 · answered Aug 28 '15 at 14:33

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>

this works in jsfiddle. I had found a similar solution in other posts. But I doesn't work for me and I don't understand why. I comment out any other style I have and used your code but it still doesn't work. — thr, Aug 28 '15 at 14:52

score 0 · Answer 2 · edited May 23 '17 at 11:52

0

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.

edited May 23 '17 at 11:52

Community

1
1

answered Aug 28 '15 at 14:39

brae

1,052
8
18

thanx for the help. I tried your solution and the link you shared. It works in jsfiddle but still nothing for me. Every solution I've found works in jsfiddle. But not for me. I don't understand why...It is getting really frustrating... – thr Aug 28 '15 at 15:06

Text align in span

2 Answers2