Wie erreicht man die richtige Ausrichtung beim Drehen von Text in CSS?

Text in CSS zur vertikalen Ausrichtung drehen

Eine häufige Herausforderung beim Drehen von Text in CSS besteht darin, die Ausrichtung des Textes und seiner Umgebung beizubehalten Elemente. Um dieses Problem anzugehen, untersuchen wir das Problem und bieten eine Lösung an.

Das in der Frage bereitgestellte HTML und CSS veranschaulichen einen Versuch, den Text vertikal zu drehen, indem eine Drehung um -90 Grad auf die Klasse .rotateObj .title angewendet wird . Dies führt jedoch zu einer Fehlausrichtung und stört die beabsichtigte Anordnung der Elemente.

Die Fehlausrichtung entsteht, weil die Drehung den natürlichen Textfluss stört. Wenn der Text um 90 Grad gedreht wird, wird er vertikal und nimmt im Verhältnis zu den umgebenden Elementen einen anderen Raum ein. Um dies zu überwinden, müssen wir die Änderung der Ausrichtung berücksichtigen und die anderen Elemente entsprechend anpassen.

Ein effektiver Ansatz besteht darin, die Transformationseigenschaft zu verwenden, um den Text zu drehen. Transform ermöglicht es uns, Elemente auf verschiedene Arten zu manipulieren, einschließlich Rotation. Durch Anwenden einer Transformationsdrehung von -90 Grad auf die Klasse .rotateObj .title können wir die gewünschte vertikale Ausrichtung erreichen.

<code class="css">.rotateObj .title {
    transform: rotate(-90deg);
}</code>

Das Drehen des Textes allein reicht jedoch möglicherweise nicht aus. In Ihrem speziellen Fall entsteht das Problem mit der Ausrichtung dadurch, dass das Inhalts-Div verschoben wird. Wenn ein Element schwebend ist, wird es aus dem normalen Fluss des Dokuments entfernt. Dies bedeutet, dass die Höhe des Inhalts-Divs nicht korrekt berechnet wird, wenn der darin enthaltene Text gedreht wird.

Um dieses Problem zu beheben, können Sie die Float-Eigenschaft aus der .rotateObj .content-Klasse entfernen, sodass sie dem folgen kann Normaler Fluss des Dokuments und Anpassung an den gedrehten Text.

<code class="css">.rotateObj .content {
    float: none;
    width: 600px;
    height: 100%;
    padding: 20px;
}</code>

Durch die Kombination der Transformationsdrehung und das Entfernen der Float-Eigenschaft können Sie den Text erfolgreich vertikal drehen und dabei die richtige Ausrichtung und Position der Elemente beibehalten.

Das obige ist der detaillierte Inhalt vonWie erreicht man die richtige Ausrichtung beim Drehen von Text in CSS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!