CSS에서 텍스트를 회전할 때 올바른 정렬을 달성하는 방법은 무엇입니까?

세로 정렬을 위해 CSS에서 텍스트 회전

CSS에서 텍스트를 회전할 때 직면하게 되는 일반적인 문제 중 하나는 텍스트와 그 주변의 정렬을 유지하는 것입니다. 강요. 이 문제를 해결하기 위해 문제를 살펴보고 해결책을 제시해 보겠습니다.

질문에 제공된 HTML 및 CSS는 .rotateObj .title 클래스에 -90도 회전을 적용하여 텍스트를 수직으로 회전하려는 시도를 보여줍니다. . 그러나 이로 인해 정렬 오류가 발생하고 요소의 의도된 배열이 깨집니다.

회전이 텍스트의 자연스러운 흐름을 방해하기 때문에 정렬 오류가 발생합니다. 텍스트가 90도 회전하면 수직이 되고 주변 요소와 관련하여 다른 공간을 차지합니다. 이를 극복하려면 방향 변화를 고려하고 이에 따라 다른 요소를 조정해야 합니다.

효과적인 접근 방식 중 하나는 변환 속성을 사용하여 텍스트를 회전하는 것입니다. 변환을 사용하면 회전을 포함한 다양한 방법으로 요소를 조작할 수 있습니다. .rotateObj .title 클래스에 -90도 회전 변환을 적용하면 원하는 수직 정렬을 얻을 수 있습니다.

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

그러나 텍스트 회전만으로는 충분하지 않을 수 있습니다. 특정 경우 정렬 문제는 콘텐츠 div가 부동되어 발생하기 때문에 발생합니다. 요소가 부동되면 문서의 일반적인 흐름에서 제거됩니다. 이는 내부 텍스트가 회전할 때 콘텐츠 div의 높이가 올바르게 계산되지 않음을 의미합니다.

이 문제를 해결하려면 .rotateObj .content 클래스에서 float 속성을 제거하여 문서의 정상적인 흐름을 유지하고 회전된 텍스트에 적응합니다.

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

변환 회전을 결합하고 부동 속성을 제거하면 요소의 적절한 정렬과 위치를 유지하면서 텍스트를 수직으로 회전할 수 있습니다.

위 내용은 CSS에서 텍스트를 회전할 때 올바른 정렬을 달성하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!