CSS行高对齐问题

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