CSS行高度對齊問題

我設計一個網站，與每一頁上的報價。我正在將CSS應用到此引用中，以使其看起來儘可能出色並脫穎而出。不過，我有幾個問題。CSS行高度對齊問題

.quote { 
 
    font-size: 18pt; 
 
    padding-top: 50px; 
 
    padding-bottom: 15px; 
 
    text-align: center; 
 
    line-height: 0.25; 
 
} 
 

 
.speech_mark_large { 
 
    color: #203D69; 
 
    font-size: 120px; 
 
    vertical-align: top; 
 
}

<div class="quote"> 
 
    <span class="speech_mark_large">&ldquo;</span> Leading the way with innovative design of corrugated Point of Sale displays and packaging offering bespoke design to fulfill your brief. 
 
    <span class="speech_mark_large">&rdquo;</span> 
 
</div>

同樣在JSFiddle。

我要報價的兩行要緊密聯繫起來，但是當我申請一個線高度，解決這個問題，它推動了講話標誌着成前行。我該如何解決這個問題？

來源

2012-04-08 RSM

過帳的jsfiddle是偉大的，但也請在這裏發表的代碼，所以萬一的jsfiddle永遠消失了，這個問題仍然有用它自己的。 – 2012-04-08 15:36:40

應設置line-height完整.quote元素。接下來，你的內心.speech_mark_large元素設置vertical-align到top。通過更改.quote元素的line-height，您可以將行距調整爲您認爲最好的行距。

編輯：我已經添加top和position到.speech_mark_large所以你可以改變引號的垂直位置。

CSS

.quote { 
    font-size:18pt; 
    padding-top:15px; 
    padding-bottom:15px; 
    text-align: center; 
    line-height: 30px; 
} 
.speech_mark_large { 
    color:#203D69; 
    font-size:50pt; 
    vertical-align: top; 
    top: 5px; 
    position: relative; 
}

看到這個更新JSFiddle

來源

2012-04-08 15:57:44

無法正常工作，如果你走下線高度：40px;所以不是一個真正可行的解決方案 – RSM 2012-04-10 10:26:48

我已經更新了我的答案（和JSFiddle）以允許line-heights小於40px – 2012-04-10 11:04:01

試試這個：

.speech_mark_large { 
color:#203D69; 
font-size:50pt; 
line-height: 35px; 
vertical-align:text-top; 
}

行高度將使其在嵌入式文本高度（後者又使它們漂浮在其他文字）佔用較少的空間。垂直對齊將通過告訴引號將它們自己對齊到文本的底部來解決此問題，而不是通常。

來源

2012-04-08 15:25:55 Rodik

CSS行高度對齊問題

回答

相關問題