一個DIV里面的文字如何上下左右居中顯示
通過css中的text-align屬性和line-height屬性可以設置div內的文字上下左右居中顯示。下面小編舉例講解一個DIV里面的文字如何上下左右居中顯示。
東西/原料
- html+css
- 代碼編纂器：Dreamweaver CS5
方式/步調
- 1
新建一個html文件，定名為test.html，用于講解一個DIV里面的文字若何上下擺布居中顯示。
- 2
在test.html文件內，利用div標簽建立一行文字，文字內容為“這是測試的文字”。
- 3
在test.html文件內，設置div的id屬性為mycss，本家兒要用于下面經由過程該id來設置css樣式。
- 4
在test.html文件內，編寫<style type="text/css"></style>標簽，頁面的css樣式將寫在該標簽內。
- 5
在css標簽中，經由過程id（mycss）設置div的樣式，利用width屬性設置div的寬度為280px，利用height屬性設置div的高度為180px，同時，利用background屬性設置div的布景顏色為灰色。
- 6
在css標簽中，將text-align屬性設置為center，實現文字的程度居中，將line-height屬性設置為180px(與height的高度相等)，實現文字的垂直居中。
- 7
在瀏覽器打開test.html文件，查看實現的結果。
總結：
- 1
1、建立一個test.html文件。
2、在文件內，利用div標簽建立一行文字。
3、在css標簽中，經由過程id（mycss）設置div的樣式，利用width屬性設置div的寬度為280px，利用height屬性設置div的高度為180px。
4、在css標簽中，將text-align屬性設置為center，實現文字的程度居中，將line-height屬性設置為180px(與height的高度相等)，實現文字的垂直居中。
注重事項
- line-height的高度值必需與div的高度值相等。
- 發表于 2020-01-10 17:00
- 閱讀 ( 1446 )
- 分類：其他類型
admin
0 篇文章
作家榜 ?
-
xiaonan123
189 文章
-
湯依妹兒
97 文章
-
luogf229
46 文章
-
jy02406749
45 文章
-
小凡
34 文章
-
Daisy萌
32 文章
-
我的QQ3117863681
24 文章
-
華志健
23 文章