How to Achieve Proper Alignment When Rotating Text in CSS?

Rotating Text in CSS for Vertical Alignment

One common challenge encountered when rotating text in CSS is maintaining the alignment of the text and its surrounding elements. To address this, let's explore the issue and provide a solution.

The HTML and CSS provided in the question demonstrate an attempt to rotate the text vertically by applying a -90-degree rotation to the .rotateObj .title class. However, this causes misalignment and breaks the intended arrangement of the elements.

The misalignment occurs because the rotation disrupts the natural flow of text. When text is rotated 90 degrees, it becomes vertical and occupies a different space in relation to its surrounding elements. To overcome this, we need to account for the change in orientation and adjust the other elements accordingly.

One effective approach is to use the transform property to rotate the text. Transform allows us to manipulate elements in various ways, including rotation. By applying a transform rotation of -90 degrees to the .rotateObj .title class, we can achieve the desired vertical alignment.

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

However, rotating the text alone may not be sufficient. In your specific case, the issue with alignment arises from the content div being floated. When an element is floated, it is removed from the normal flow of the document. This means that the height of the content div will not be correctly calculated when the text inside is rotated.

To resolve this, you can remove the float property from the .rotateObj .content class, allowing it to follow the normal flow of the document and adapt to the rotated text.

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

By combining the transform rotation and removing the float property, you can successfully rotate the text vertically while maintaining proper alignment and positions of the elements.

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