이 글은 CSS3에서 텍스트의 세로 배열을 주로 소개하는데, 이는 특정 참고 가치가 있습니다. 이제 도움이 필요한 친구들은
을 참고할 수 있습니다. 텍스트는 수직으로 정렬됩니다. 즉, CSS의 쓰기 모드 속성이 사용됩니다.
writing-mode는 원래 IE에서 지원하는 속성이었지만 나중에 CSS3에 이 새 속성이 추가되었으므로 IE와 다른 브라우저의 구문이 달라집니다.
writing-mode:horizontal-tb;//默认:水平方向,从上到下 writing-mode:vertical-rl; //垂直方向,从右向左 writing-mode:vertical-lr; //垂直方向,从左向右
역사적인 이유로 IE에서는 이 속성 값이 특히 복잡합니다.
-ms-writing-mode: lr-tb | rl-tb | bt-rl | -bt | rl | tb
자세한 내용은 공식 문서를 참조하세요:
https://developer.mozilla.org/en-US/docs/ Web/ CSS/writing-mode/
이 속성을 사용하여 텍스트 정렬을 결합할 수 있습니다. center는 수직 센터링을 구현하거나 margin:auto를 사용합니다.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>CSS文字垂直排列</title> <style type="text/css"> div{ border: 1px solid lightblue; padding: 5px; } .vertical-text{ -webkit-writing-mode: vertical-rl; writing-mode: vertical-rl; } </style> </head> <body> <div class="vertical-text"> 1. 文字垂直排列 <br /> 2. 文字垂直排列 </div> </body> </html>
텍스트의 쓰기 모드를 설정한 다음 텍스트와 결합할 수 있습니다. -indent 텍스트 클릭 시 가라앉는 효과 구현하기;
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>CSS3 图片垂直居中</title> <style type="text/css"> div{ border: 1px solid lightblue; padding: 5px; height: 500px; } .vertical-img{ -webkit-writing-mode: vertical-rl; -ms-writing-mode: bt-rl; writing-mode: vertical-rl; text-align: center; } </style> </head> <body> <div class="vertical-img"> <img src="1.jpg"/> </div> </body> </html>
위 내용은 모두의 학습에 도움이 되기를 바랍니다. PHP 중국어 웹사이트!
관련 추천 :
css 그라데이션 색상 생략 표시 내장 글꼴 텍스트 섀도우 종합 소개
#🎜🎜 #
위 내용은 CSS3는 수직 텍스트 배열을 구현합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!