Comment obtenir un bon alignement lors de la rotation du texte en CSS ?

Rotation du texte en CSS pour l'alignement vertical

Un défi courant rencontré lors de la rotation du texte en CSS est de maintenir l'alignement du texte et de son environnement. éléments. Pour résoudre ce problème, explorons le problème et proposons une solution.

Le HTML et le CSS fournis dans la question démontrent une tentative de rotation du texte verticalement en appliquant une rotation de -90 degrés à la classe .rotateObj .title. . Cependant, cela provoque un désalignement et brise la disposition prévue des éléments.

Le désalignement se produit parce que la rotation perturbe le flux naturel du texte. Lorsque le texte pivote de 90 degrés, il devient vertical et occupe un espace différent par rapport aux éléments environnants. Pour surmonter cela, nous devons tenir compte du changement d'orientation et ajuster les autres éléments en conséquence.

Une approche efficace consiste à utiliser la propriété transform pour faire pivoter le texte. Transform nous permet de manipuler des éléments de différentes manières, y compris la rotation. En appliquant une rotation de transformation de -90 degrés à la classe .rotateObj .title, nous pouvons obtenir l'alignement vertical souhaité.

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

Cependant, la rotation du texte seule peut ne pas être suffisante. Dans votre cas spécifique, le problème d'alignement provient du fait que le contenu div flotte. Lorsqu'un élément flotte, il est supprimé du flux normal du document. Cela signifie que la hauteur du div de contenu ne sera pas correctement calculée lorsque le texte à l'intérieur est pivoté.

Pour résoudre ce problème, vous pouvez supprimer la propriété float de la classe .rotateObj .content, lui permettant de suivre le flux normal du document et s'adapter au texte pivoté.

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

En combinant la rotation de transformation et en supprimant la propriété float, vous pouvez réussir à faire pivoter le texte verticalement tout en conservant l'alignement et les positions corrects des éléments.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!