Question

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

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

Answer 1

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

编辑：我已将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

Answer 2

试试这个：

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

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

CSS行高对齐问题

2 个答案: