CSS line-height alignment Fragen

Ich bin der Gestaltung einer website, mit einem Zitat auf jeder Seite. Ich bin die Anwendung von CSS auf dieses Zitat, um es am besten Aussehen kann und abheben. Allerdings habe ich ein paar Fragen.

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;
}

HTML:

<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>

Auch auf JSFiddle.

Will ich die beiden Zeilen die quote um näher zusammen zu sein, aber wenn ich eine line-height, um dieses Problem zu lösen, drückt es den Anführungszeichen in der vorherigen Zeile. Wie kann ich dieses Problem lösen?

Buchen Sie ein JSFiddle ist toll, aber bitte poste auch den code hier ein, so im Falle der JSFiddle jemals weggeht, diese Frage ist immer noch sinnvoll, auf seine eigene.

InformationsquelleAutor RSM | 2012-04-08

css html

5

Sollten Sie die line-height auf die komplette .quote element. Neben Sie gesetzt vertical-align zu top für die innere .speech_mark_large element. Durch die änderung der line-height des .quote element, das Sie einstellen können Sie den Zeilenabstand, was Sie denken, sieht am besten.

EDIT: ich habe top und position zu .speech_mark_large so ändern Sie die vertikale position der Anführungszeichen.

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;
}
```
Sehen diese aktualisierte JSFiddle
- funktioniert nicht, wenn Sie unterhalb der line-height:40px; also nicht wirklich eine praktikable Lösung
- Ich aktualisiert meine Antwort (und JSFiddle) zu ermöglichen, line-in Höhen von weniger als 40px
InformationsquelleAutor huysentruitw
0

versuchen Sie dies:
```
.speech_mark_large {
color:#203D69;
font-size:50pt;
line-height: 35px;
vertical-align:text-top;
}
```
line-height machen, Sie nehmen weniger Platz aus der inline-text-Höhe (die wiederum macht Sie schweben über Ihre anderen text).
Die vertikal-ausrichten werden dieses Problem beheben, indem er die Angebote richten sich auf den text unten, anstatt normalerweise.

InformationsquelleAutor Rodik

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.