1

我正在设计一个网站，每页都有报价。我将 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上。

我希望引号的两行靠得更近，但是当我应用行高来解决这个问题时，它会将语音标记推到上一行。我该如何解决这个问题？

4

2 回答 2

5

您应该line-height在完整.quote元素上设置。接下来，您设置vertical-align为top内部.speech_mark_large元素。通过更改元素的line-height，.quote您可以将行间距调整为您认为最好的。

编辑：我添加了topandposition以便.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-08T15:57:44.940 回答
0

试试这个：

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

行高将使它们从内联文本高度中占用更少的空间（这反过来又使它们浮在您的其他文本上）。垂直对齐将通过告诉引号将自己与文本底部对齐而不是正常对齐来解决此问题。

于 2012-04-08T15:25:55.130 回答