Comment aligner le texte pivoté en CSS : résoudre les problèmes d'alignement et de positionnement

Rotation du texte : résoudre les problèmes d'alignement et de position en CSS

La manipulation de l'alignement et du positionnement du texte peut être fastidieuse, surtout lorsque le texte est pivoté. Dans cet article, nous abordons un problème spécifique lié à la rotation du texte et proposons des solutions pour le résoudre.

Comprendre le problème

Lors de la rotation du texte en CSS à l'aide de la propriété transform, vous avez peut-être remarqué problèmes d’alignement et de positionnement du texte. En effet, la rotation affecte principalement l'apparence visuelle, et non le flux de texte réel.

Explorer les solutions

1. Utilisation de la propriété Writing-Mode

La propriété writing-mode vous permet de contrôler la direction d'écriture et l'orientation du texte. En utilisant le mode d'écriture : vertical-rl ; dans votre CSS, vous pouvez faire pivoter le texte après avoir appliqué la transformation de rotation. Bien que cette approche ne soit pas optimale dans tous les cas, elle mérite d'être envisagée.

2. Aligner verticalement le contenu

Une autre façon de gérer les problèmes d'alignement consiste à aligner verticalement le texte à l'aide de vertical-align: middle; dans votre code CSS. Cela garantit que le contenu reste centré verticalement dans le conteneur de texte pivoté.

Exemple de code

Voici un extrait de code CSS mis à jour qui intègre les solutions ci-dessus :

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

/* Vertically align the content */
.rotateObj .content {
  vertical-align: middle;
}

/* Hide unwanted content */
.hide {
  display: none;
}</code>

Conclusion

La rotation du texte en CSS peut être une tâche délicate, notamment lors de l'alignement et du positionnement du contenu. En utilisant la propriété writing-mode, en vérifiant les paramètres d'alignement et en manipulant l'alignement vertical, vous pouvez surmonter ces défis et créer un texte pivoté visuellement attrayant et bien aligné.

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!