Two different text align in a span

265
February 17, 2017, at 08:46 AM

Within a bootstrap <span> element, I'm trying to align the word "amount" to the left, and the "$" to the right, but having them on the same label. I tried to have a <span> inside another <span> and apply different CSS to them, like the code below, but that didn't work. How should I deal with this? Can someone please help? Many thanks!

HTML:

span class="input-group-addon" id="sizing-addon2">amount <span id="dollarsign">$</span></span>

CSS:

.input-group-addon {
    min-width:300px;  
    text-align:centre;
    font-family: myriad-pro, sans-serif;
 }
 #dollarsign{
    text-align:right;   
 } 
Answer 1

You can float the dollar sign right.

.input-group-addon { 
  min-width: 300px; 
  font-family: myriad-pro, sans-serif; 
  text-align: left!important; 
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
<span class="input-group-addon" id="sizing-addon2">amount <span class="pull-right">$</span></span>

Answer 2

.input-group-addon is set to width: 1%; in Bootstrap v3.) For very good reason. Don't mess with it. The proper way to go is:

  • set a min-width on that thing min-width: 10rem (%,em, rem, px...)
  • use a <span> insde and float it.
<div class="input-group">
      <span class="input-group-addon"  style="min-width: 12rem; text-align:right;"><span style="float: left;">I am floating-left</span>$</span>
      <input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
      <span class="input-group-addon">.00</span>
    </div>

The key here is min-width. See example. Also, if needed, disable the min-width on very narrow device and wrap some of that text in a class that hides it on mobile (have a short version of it).

.input-group-addon:first-child { 
  min-width: 200px; 
  text-align: right; 
} 
.input-group-addon .floater { 
  float: left; 
} 
 
.input-group { 
margin-bottom: 15px; 
} 
 
 
 
 
body { 
 margin: 0; 
 display: flex; 
 flex-direction: column; 
 align-items:cener; 
 justify-content: center; 
 min-height: 100vh; 
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
 
    <div class="input-group"> 
      <span class="input-group-addon"><span class="floater">I am floating-left</span>$</span> 
      <input type="text" class="form-control" aria-label="Amount (to the nearest dollar)"> 
      <span class="input-group-addon">.00</span> 
    </div> 
     
        <div class="input-group"> 
      <span class="input-group-addon"><span class="floater">Floating-left</span>$</span> 
      <input type="text" class="form-control" aria-label="Amount (to the nearest dollar)"> 
      <span class="input-group-addon">.00</span> 
    </div> 
     
        <div class="input-group"> 
      <span class="input-group-addon"><span class="floater">$</span>Not floating left</span> 
      <input type="text" class="form-control" aria-label="Amount (to the nearest dollar)"> 
      <span class="input-group-addon">.00</span> 
    </div>

Note: Do not use more than 1 <input> in an .input-group!
Also: If you use it on only one item, you might want to set a right margin on the inner span and you're done. Just remember it will always shrink if you leave it room, because it has a set width:1%.

Answer 3

You can use float and text-align:

HTML

<span class="input-group-addon" id="sizing-addon2"><span>amount </span>$</span>

CSS

#sizing-addon {text-align:right}
#sizing-addon2 span {float:left;}

You could also use (inline-)flex and justify-content:space-between

READ ALSO
Determine heights and widths in css based on div grid layout

Determine heights and widths in css based on div grid layout

I'm trying to find a way to determine the dimensions of each node/div in a 12x12 gridRight now, I find the percentages by doing ((row-x || col-y)/12) * 100 but I will later do that with SASS

251
Magnific Popup doesn&#39;t scroll to popup in Firefox/IE

Magnific Popup doesn't scroll to popup in Firefox/IE

I have a magnific popup that I display after clicking on a buttonIn chrome the page scrolls to the popup so it is in the center of the screen

396