如何获得两个相邻的跨度以垂直显示其文本？

所以我有这样的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

如何获得两个相邻的跨度以垂直显示其文本？

回答

相关问题