在不同的水平上對齊不同大小的文本

我試圖在不同的水平上對齊不同大小的文本。見下面的圖片看到我想要的東西：在不同的水平上對齊不同大小的文本

這裏是我想要的代碼，但它似乎並沒有工作。

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>

任何幫助將非常感激！

來源

2015-11-19 hpb

代碼對齊得當，有什麼問題了嗎？ – Imad

在他的圖片中，'$'的尖端不會比'799'的頂部高。而'/ mo'不會低於'799'的底部。如果你渲染他的代碼，你會看到'$'比'799'頂部高，'/ month'比'799'底部低。 – Ultimater

您可以指定跨度的行高爲好，因此影響垂直對齊。

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>

來源

2015-11-19 07:53:30

這一個工作就像一個魅力！謝謝:) – hpb

沒問題，高興地幫助:) –

您可以使用位置和頂部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

來源

2015-11-19 07:31:12

嘗試整體風格：

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

來源

2015-11-19 07:34:30 Ultimater

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>

來源

2015-11-19 07:44:04

這同一個事實，即所有他們三人不具有相同的行高度做。我可以修改您的代碼以便按照您的意願對齊。

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：不要使用內嵌式的，除非你絕對要

來源

2015-11-19 07:53:36 Sinstein

在不同的水平上對齊不同大小的文本

回答

相關問題