Comment faire pivoter du texte en CSS sans problèmes d'alignement ?

Comment faire pivoter du texte en CSS sans problèmes d'alignement

Pour obtenir la rotation du texte comme indiqué dans l'image fournie, des transformations CSS peuvent être utilisées . Cependant, cela entraîne souvent des problèmes d’alignement et de positionnement. Ce problème se pose car la rotation affecte la position de l'élément dans le flux.

Dans le code HTML fourni, plusieurs titres et sections de contenu sont imbriqués dans un conteneur. Pour faire pivoter les titres, la propriété transform: rotate(-90deg) est appliquée. Cependant, cette rotation perturbe l'alignement du contenu car on suppose que le contenu s'écoule horizontalement après le titre.

Causes des problèmes d'alignement

1. Flux horizontal : Le contenu est défini pour flotter vers la gauche, ce qui le fait circuler horizontalement après la rotation du titre. La rotation crée un espace vertical, qui rompt l'alignement prévu.
2. Largeur ignorée : Lorsque le titre est pivoté, sa largeur est ignorée. En conséquence, le contenu continue de s'écouler horizontalement, en supposant que le titre occupe toujours l'espace de largeur.

Solution : Préserver l'alignement

Pour maintenir un bon alignement, nous peut utiliser les stratégies suivantes :

1. Flux vertical :

• Convertissez le titre en élément de bloc en ajoutant display: block.
• Appliquez le mode d'écriture : vertical-rl pour changer le mode d'écriture en vertical.
• Faites pivoter le titre sans affecter son positionnement en utilisant transform: rotate(-90deg) ou transform: rotateZ(-90deg).
• Définissez le mode d'écriture du contenu sur writing-mode: horizontal-tb .

Exemple :

<code class="css">.title {
  display: block;
  writing-mode: vertical-rl;
  transform: rotateZ(-90deg) /* or transform: rotate(-90deg) */;
}

.content {
  writing-mode: horizontal-tb;
}</code>

2. Positionnement absolu :

• Convertissez le titre en élément absolu en ajoutant la position : absolue.
• Faites pivoter le titre à l'aide de transform : rotate(-90deg).
• Positionnez le titre verticalement en définissant ses propriétés haut et bas.
• Alignez le contenu avec le titre pivoté en utilisant les marges.

Exemple :

<code class="css">.title {
  position: absolute;
  transform: rotate(-90deg);
  top: 0;
  bottom: 0;
}

.content {
  margin-left: 50px /* adjust the margin to align with the rotated title */;
}</code>

En utilisant ces méthodes, vous pouvez faire pivoter le texte en CSS tout en préservant l'alignement et le positionnement des éléments adjacents.

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!