html:(36):间距和对齐
生活随笔
收集整理的這篇文章主要介紹了
html:(36):间距和对齐
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
段落排版--中文字間距、字母間距
中文字間隔、字母間隔設置：
如果想在網頁排版中設置文字間隔或者字母間隔就可以使用 ? ?letter-spacing 來實現，如下面代碼：
h1{letter-spacing:50px; } ... <h1>了不起的蓋茨比</h1>注意：這個樣式使用在英文單詞時，是設置字母與字母之間的間距。
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>字間距</title> <style type="text/css"> h1{letter-spacing:20px; } </style> </head> <body> <h1>hello world!你好！</h1> </body> </html>運行結果
段落排版--對齊
想為塊狀元素中的文本、圖片設置居中樣式嗎？可以使用text-align樣式代碼，如下代碼可實現文本居中顯示。(那么什么是塊狀元素呢？在后面的11-1、11-2小節中會講到。)
h1{text-align:center; } <h1>了不起的蓋茨比</h1>同樣可以設置居左：
h1{text-align:left; } <h1>了不起的蓋茨比</h1>還可以設置居右：
h1{text-align:right; } <h1>了不起的蓋茨比</h1> <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>對齊</title> <style type="text/css"> div{text-align:center;} </style> </head> <body> <div><img src="http://img1.sycdn.imooc.com/52b4113500018cf102000200.jpg" ></div> </body> </html>運行結果
總結
以上是生活随笔為你收集整理的html:(36):间距和对齐的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 70 include指令
- 下一篇： java color类 蓝色_java中