How to Rotate Text in CSS Without Alignment Issues?

How to Rotate Text in CSS Without Alignment Issues

To achieve the text rotation as shown in the image provided, CSS transforms can be utilized. However, doing so often results in misalignment and positioning problems. This issue arises because the rotation affects the element's position in the flow.

In the provided HTML, multiple titles and content sections are nested within a container. To rotate the titles, the transform: rotate(-90deg) property is applied. However, this rotation disrupts the alignment of the content because it is assumed that the content flows horizontally after the title.

Causes of Alignment Issues

1. Horizontal Flow: The content is set to float left, causing it to flow horizontally after the rotated title. The rotation creates a vertical gap, which breaks the intended alignment.
2. Ignored Width: When the title is rotated, its width is disregarded. As a result, the content continues flowing horizontally, assuming the title still occupies the width space.

Solution: Preserving Alignment

To maintain proper alignment, we can use the following strategies:

1. Vertical Flow:

• Convert the title to a block element by adding display: block.
• Apply writing-mode: vertical-rl to change the writing mode to vertical.
• Rotate the title without affecting its positioning by using transform: rotate(-90deg) or transform: rotateZ(-90deg).
• Set the content's writing mode to writing-mode: horizontal-tb.

Example:

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

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

2. Absolute Positioning:

• Convert the title to an absolute element by adding position: absolute.
• Rotate the title using transform: rotate(-90deg).
• Position the title vertically by setting its top and bottom properties.
• Align the content with the rotated title by using margins.

Example:

<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>

By using these methods, you can rotate text in CSS while preserving the alignment and positioning of adjacent elements.

The above is the detailed content of How to Rotate Text in CSS Without Alignment Issues?. For more information, please follow other related articles on the PHP Chinese website!