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にもあります。

引用符の2行を近づけたいのですが、行の高さを適用すると、これを解決するために、スピーチマークが前の行に押し上げられます。どうすればこれを解決できますか？

4

2 に答える 2

5

line-height完全な.quote要素にを設定する必要があります。次に、内側の要素に設定vertical-alignします。要素の を変更することで、最も見栄えが良いと思われる行間隔に調整できます。top.speech_mark_largeline-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を参照してください

于 2012-04-08T15:57:44.940 に答える
0

これを試して：

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

行の高さにより、インライン テキストの高さよりも少ないスペースを占めるようになります (これにより、他のテキストの上に浮かびます)。vertical-align は、通常ではなく、引用符をテキストの下部に揃えるように指示することで、これを修正します。

于 2012-04-08T15:25:55.130 に答える