html - How do I get two adjacent spans to display their text vertically? -


so have html

<div class="container">     <div class="jumbotron">         <div class="row">             <div class="col-xs-6"> <span class="currency-symbol">$</span><span class="price">44</span>              </div>             <div class="col-xs-6">                 <p>/ month</p>                 <p>here interesting things product.</p>             </div>         </div>     </div> </div> 

and css

.container {     width: 333px;     margin: 0 auto; } .currency-symbol {     vertical-align: top;     font-size: 33px; } .price {     font-size: 88px;     vertical-align: top; /* doesn't work */ } 

the '$' symbol aligns top text in rh column. price amount doesn't.

how vertically align '$' symbol, '44' amount , text in rh column they're in line?

jsfiddle here: http://jsfiddle.net/magician11/4k19w0fs/3/

thanks.

you can try line-height on price class

.price {     font-size: 88px;     line-height: 80px; } 

Popular posts from this blog

c# - ODP.NET Oracle.ManagedDataAccess causes ORA-12537 network session end of file -

matlab - Compression and Decompression of ECG Signal using HUFFMAN ALGORITHM -

utf 8 - split utf-8 string into bytes in python -