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行高度对齐问题

回答

相关问题