在不同级别上对齐不同大小的文本

Question

我试图在不同级别上对齐不同大小的文本。请参见下图，了解我的需求：

以下是我尝试的代码，但它似乎无法正常工作。

＆＃13;

＆＃13;

div {
  background: #1FA3A2;
  padding: 50px;
  color: #fff;
  font-family: sans-serif;
}

＆＃13;

<div>
  <span style="vertical-align:text-top; font-size:14px;">$</span>
  <span style="font-size:30px; vertical-align:top;">199</span>
  <span style="font-size:14px; vertical-align:bottom;">/month</span>
</div>

＆＃13;

＆＃13;

＆＃13;

任何帮助都会非常感激！

Answer 1

您也可以指定跨度的线高，因此会影响垂直对齐。

＆＃13;

＆＃13;

div {
  background: #1FA3A2;
  padding: 50px;
  color: #fff;
  font-family: sans-serif;
}

＆＃13;

<div>
  <span style="vertical-align:top; font-size:14px;">$</span>
  <span style="font-size:30px; line-height:27px; vertical-align:bottom;">199</span>
  <span style="font-size:14px; line-height:16px; vertical-align:bottom;">/month</span>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

您可以使用position和top css属性来解决代码中的矿工对齐问题。请参阅更新的代码。建议单独编写样式（而不是内联样式）。给定的样式（top: 'value';）以下代码可能会根据您计划给出的整体样式而改变（与带问题的图片一样）

<div>
    <span class="dlr">$</span>
    <span style="font-size:30px; vertical-align:top;">199</span>
    <span class="perd" >/month</span>
</div>

.dlr{
  vertical-align:text-top;
  font-size:14px;
  position:relative;
  top:6px;}
.perd{
  font-size:14px; 
  vertical-align:bottom;
  position:relative;
  top:-4px;}

以下是Demo

Answer 3

尝试：

.a{font-size:12px; vertical-align:text-top; }
.b{font-size:30px; vertical-align:middle}
.c{font-size:12px; vertical-align:sub;}

使用：

<div>
    <span class="a">$</span>
    <span class="b">199</span>
    <span class="c">/month</span>
</div>

http://jsfiddle.net/z03cynrp/1/

Answer 4

HI现在习惯使用此after或before css 属性

div > span{
 position:relative;
  display:inline-block;
  vertical-align:top;color:#fff;
}
div > span:after{
  position:absolute;
  content:"$";
    font-size:14px;
  top:4px;
  left:-6px;
}
div > span:before{
  position:absolute;
  content:"/month";
    font-size:14px;
  bottom:3px;
  right:-38px;
}
div{background:blue; padding:20px 0; text-align:center;}

<div>
    <span style="font-size:30px; vertical-align:top;">199</span>
</div>

Answer 5

这与其中三个都没有相同的线高的事实有关。我可以根据需要修改你的代码。

＆＃13;

＆＃13;

span {
  line-height: 32px;
}

＆＃13;

<div>
  <span style="font-size:14px; vertical-align:text-bottom">$</span>
  <span style="font-size:30px;">199</span>
  <span style="font-size:14px;">/month</span>
</div>

＆＃13;

＆＃13;

＆＃13;

PS：除非你绝对需要

，否则不要使用内联样式