萬盛學電腦網 >> 網頁制作 >> DivCSS教程 >> 如何讓CSS實現文字的豎排
如何讓CSS實現文字的豎排
大家知道CSS實現文字的豎排嗎?如果不知道的趕緊看看我們給大家整理出來的教程
1. writing-mode(設置對象書寫方向)
語法：writing-mode : lr-tb、tb-rl
參數：lr-tb：從左向右，從上往下 tb-rl：從上往下，從右向左
示例：
CSS Code復制內容到剪貼板
div { writing-mode: tb-rl; }
2. text-align(設置對象中文本的對齊方式)
語法：text-align : left、right、center、justify
參數：left：左對齊 right：右對齊 center：居中 justify：兩端對齊
示例：
CSS Code復制內容到剪貼板
div { text-align : center; }
而通常普通的排版思路：對文字對象寬度設置只能排下一個文字的寬度距離，讓文字一行排不下兩個文字使其文字自動換行，就形成了豎立排版需求。
CSS Code復制內容到剪貼板
- <!DOCTYPE html>
- <html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
- <title>豎列排版實例 在線演示 www.jb51.net</title>
- <style>
- body{text-align:center}
- .shuli{ margin:0 auto;width:20px;line-height:24px;border:1px solid #333}
- </style>
- </head>
- <body>
- <div class="shuli">我是豎列排版</div>
- </body>
- </html>
CSS實現文字的豎排精彩內容就到這裡了!希望大家可以好好利用!
相關推薦：
CSS三角箭頭的制作方法
- 上一頁:CSS3中使用RGBA設置透明度的方法
- 下一頁:CSS三角箭頭的制作方法
DivCSS教程排行
程序編程推薦
相關文章
copyright © 萬盛學電腦網 all rights reserved