Wie man einen Text auf der Y-Achse verschiebt

Question

Wie meine Handschrift zeigt, versuche ich das Span-Tag weiter nach unten zu bewegen, so dass der Rest des Absatztextes in der Mitte davon stehen kann. https://jsfiddle.net/9r81ry8c/1/

html:

<div> 
    <p> This <span>is</span> awesome </p> 
</div> 

css:

span{ 
    font-size: 60px; 
    transform: translateY(-20%); 
} 

Ein Beispiel ist das gleiche, wenn wir eine horizontale Linie in der Mitte des Textes setzen, wo es aussieht: - Das -. Na klar, in meinem Fall sind die Zeilen jetzt Textabsatz. Wie kann ich das span-Tag vertikal nach unten verschieben, um dies zu erreichen?

Answer 1

versuchen vertical-align prop wie unten

span { 
    font-size: 60px; 
    vertical-align:middle; 
    line-height:1; 
} 
p { 
    vertical-align:middle; 
    line-height:1; 
} 

Answer 2

CSS vertical-align Eigenschaft ist für genau diese Situation:

span{ 
    font-size: 60px; 
    vertical-align:middle; 
} 
p { 
    display: inline-block; /* see edit below */ 
} 

https://jsfiddle.net/9r81ry8c/14/

Ihre "ist" ist jetzt größer als der andere Text Wenn also dieser Text auf "Mitte" gesetzt wird, wird der andere Text implizit ebenfalls auf der horizontalen Achse zentriert.

Eine mögliche Nebenwirkung davon ist, dass die Zentrierung nicht mit der sichtbar Höhe der Buchstaben, sondern mit der Größe des Brief Glyphe getan wird, so werden Sie feststellen, dass vielleicht die i der is nicht im Einklang aber es ist in der Zeile als eine Glyph-Box, auch wenn der Brief nicht diese Glyph-Box füllen kann.

EDIT:

Es ist erwähnenswert, dass vertical-align wird nur Inline, inline-block oder inline-table Elemente anwenden. Wenn also Ihre vertikale Ausrichtung nicht funktioniert, überprüfen/bestätigen Sie, dass das Element, das Sie ausrichten (sein unmittelbares übergeordnetes Element, z. B. <p> in Ihrem Beispiel), auf einen der oben aufgeführten display Typen eingestellt ist.

A sehr good read about Vertical align can be found here.

Answer 3

Display wie inline-block für span. span Tag weiter nach unten von p Tag so für die Sie benötigen minus(-)-plus(+) Ihr übersetzen Wert ändern

span{ 
 
\t font-size: 60px; 
 
\t transform: translateY(20%); 
 
    display:inline-block; 
 
}

<div> 
 
\t <p> This <span>is</span> awesome </p> 
 
</div>

Answer 4

Sie CSS verwenden können transform nur auf ein Element, dessen Layout durch die CSS geregelt Boxmodell.

Here your updated jsfiddle

So verwandeln verwenden, müssen Sie zuerst Sie Anzeige einstellen müssen dann einen positiven Wert verwenden: inline-block für youe [span]. Um vollständig kompatibel empfehle ich Ihnen auch Safari und IE Syntax

span{ 
    font-size: 60px; 
    display: inline-block; 
    -ms-transform: translate(10%); /* IE 9 */ 
    -webkit-transform: translate(10%); /* Safari */ 
    transform: translateY(10%); /* Standard syntax */ 
} 

Answer 5

ich Ihren Stil-Check diese geändert haben, hinzuzufügen.

span{ 
    font-size: 60px; 
    vertical-align: middle; 
} 

Arbeits Geige Link - https://jsfiddle.net/9r81ry8c/7/