CSS-Linie-Höhe Ausrichtungsprobleme

Ich entwerfe eine Website, mit einem Zitat auf jeder Seite. Ich verwende CSS für dieses Zitat, um es so gut wie möglich aussehen zu lassen. Allerdings habe ich ein paar Probleme.CSS-Linie-Höhe Ausrichtungsprobleme

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

Auch auf JSFiddle.

Ich möchte, dass die beiden Zeilen des Zitats näher beieinander liegen, aber wenn ich eine Zeilenhöhe anwende, werden die Sprachmarkierungen in die vorherige Zeile verschoben. Wie löse ich das?

Quelle

2012-04-08 RSM

Posting ein JSFiddle groß ist, aber bitte auch den Code hier posten, damit im Fall der JSFiddle jemals weg geht, diese Frage nach wie vor sinnvoll ist seine eigene. –

Sie sollten line-height auf das vollständige Element .quote setzen. Als nächstes setzen Sie vertical-align auf top für das innere .speech_mark_large Element. Indem Sie das line-height des .quote Elements ändern, können Sie den Zeilenabstand auf das einstellen, was Ihrer Meinung nach am besten aussieht.

EDIT: Ich habe top und position zu .speech_mark_large hinzugefügt, so dass Sie die vertikale Position der Anführungszeichen ändern können.

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 Sie diese aktualisiert JSFiddle

Quelle

2012-04-08 15:57:44

funktioniert nicht, wenn Sie unter die Zeilenhöhe gehen: 40px; Also nicht wirklich eine machbare Lösung – RSM

Ich habe meine Antwort (und JSFiddle) aktualisiert, um Zeilenhöhen von weniger als 40px zu ermöglichen –

versuchen Sie dies:

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

Zeilenhöhe wird sie nehmen weniger Platz aus der Inline-Texthöhe (die in-wiederum macht sie Ihren anderen Text schweben) machen. Die Vertical-Align-Funktion korrigiert dies, indem sie die Anführungszeichen so anordnet, dass sie sich an der Unterseite des Textes ausrichten und nicht normal.

Quelle

2012-04-08 15:25:55 Rodik

CSS-Linie-Höhe Ausrichtungsprobleme

Antwort

Verwandte Themen