如何獲得兩個相鄰的跨度以垂直顯示其文本？

所以我有這樣的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 are some really interesting things about the product.</p> 
      </div> 
     </div> 
    </div> 
</div>

，然後這個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 */ 
}

的 '$' 符號對齊頂端一樣的RH列中的文本。但價格數額並沒有。

如何垂直對齊'$'符號，'44'數量和RH列中的文本，以便它們全部符合？

的jsfiddle這裏：http://jsfiddle.net/magician11/4k19w0fs/3/

感謝。

來源

2015-04-23 magician11

我不確定你在問什麼，數字'44'看起來不像它的頂部，因爲它的文字大小比其他東西大得多。你究竟想要它看起來如何？ –

使用「.price」和「.currency-symbol」的'line-height'作一點點 - 使其小於字體大小。 –

你可以嘗試的line-height自己的價格類

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

來源

2015-04-23 02:25:50

謝謝。這很好，很簡單。是的，我試圖讓'$'符號，數字'44'和RH列中的文字全部對齊。 – magician11

作爲一個感興趣的問題，爲什麼我不需要這個'價格'類的垂直對齊？ – magician11

我相信他們已經處於頂端，因爲他們不佔據頂線的所有空間。一旦你添加更多的跨度，他們最終會根據他們 –

嘗試編輯價位也是這樣嗎？

.price { 
font-size: 88px; 
vertical-align: top; 
position: relative; 
left:5px; 
top:-22px; 
}

我不完全相信你問什麼，但...也許這就是你所需要的

來源

2015-04-23 02:33:21

只是要行高：1;在.price跨度上給它與空間高度相同的對齊方式。

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

這樣對齊每個元素。但是，我還建議查找垂直節奏以及如何獲取文本元素以保持相同的垂直空間。

來源

2015-04-23 02:39:33 Durthar

它實際上確實工作，只是它看起來不像。

突出顯示「44」，你會看到突出顯示延伸超出數字的頂部。唯一真正的做法是調整每個元素的line-height或margin-top。

.price { 
    line-height:77px; 
}

這似乎很接近我。請注意，其他字體（甚至其他數字）可能會有所不同。

來源

2015-04-23 02:50:24 SpoonNZ

如何獲得兩個相鄰的跨度以垂直顯示其文本？

回答

相關問題