Выравнивание текста разных размеров на разных уровнях

Question

Я пытаюсь выровнять текст разных размеров на разных уровнях. Смотрите изображение ниже, чтобы увидеть, что я хочу:

Вот код, который я пытаюсь, но это не похоже на работу.

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

<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>

Любая помощь будет очень признателен!

Answer 1

Вы можете задать высоту строки пролетов, а также, и, следовательно, влияют на вертикальное выравнивание.

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

<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>

Answer 2

Вы можете использовать позиции и верхние атрибуты 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

Try:

.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 или beforeCSS свойства, как как этого

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

Это связано с тем, что все три из них не имеют одни и те же строки-высоты. Я мог бы изменить ваш код для выравнивания по вашему желанию.

span { 
 
    line-height: 32px; 
 
}

<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>

PS: Не используйте встроенный стиль, если вы абсолютно не должны