정렬 문제 없이 CSS에서 텍스트를 회전하는 방법은 무엇입니까?

정렬 문제 없이 CSS에서 텍스트를 회전하는 방법

제공된 이미지에 표시된 대로 텍스트 회전을 달성하려면 CSS 변환을 활용할 수 있습니다. . 그러나 그렇게 하면 정렬 불량 및 위치 지정 문제가 발생하는 경우가 많습니다. 이 문제는 회전이 흐름에서 요소의 위치에 영향을 미치기 때문에 발생합니다.

제공된 HTML에서는 여러 제목과 콘텐츠 섹션이 컨테이너 내에 중첩되어 있습니다. 제목을 회전하려면 변환: 회전(-90deg) 속성이 적용됩니다. 그러나 이러한 회전은 제목 뒤에 내용이 가로 방향으로 흐른다고 가정하기 때문에 내용의 정렬에 지장을 줍니다.

정렬 문제의 원인

1. 가로 흐름: 콘텐츠가 왼쪽으로 부동하도록 설정되어 회전된 제목 이후 가로로 흐르게 됩니다. 회전하면 수직 간격이 생겨 의도한 정렬이 깨집니다.
2. 무시된 너비: 제목이 회전되면 너비가 무시됩니다. 결과적으로 제목이 여전히 너비 공간을 차지하고 있다고 가정하면 콘텐츠가 계속 가로로 흐릅니다.

해결책: 정렬 유지

올바른 정렬을 유지하려면 다음 전략을 사용할 수 있습니다:

1. 수직 흐름:

• display: block을 추가하여 제목을 블록 요소로 변환합니다.
• 쓰기 모드: 수직-rl을 적용하여 쓰기 모드를 세로로 변경합니다.
• transform:rotate(-90deg) 또는Transform:rotateZ(-90deg)를 사용하여 위치에 영향을 주지 않고 제목을 회전합니다.
• 콘텐츠의 쓰기 모드를 writing-mode:horizontal-tb로 설정합니다. .

예:

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

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

2. 절대 위치 지정:

• 위치: 절대를 추가하여 제목을 절대 요소로 변환합니다.
• 변환: 회전(-90deg)을 사용하여 제목을 회전합니다.
• 상단 및 하단 속성을 설정하여 제목을 수직으로 배치합니다.
• 여백을 사용하여 회전된 제목에 콘텐츠를 정렬합니다.

예:

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

이러한 방법을 사용하면 인접한 요소의 정렬과 위치를 유지하면서 CSS에서 텍스트를 회전할 수 있습니다.

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