div盒子水平居中 HTML網(wǎng)頁(yè)代碼中如何設(shè)置文字水平垂直居中的代碼？
HTML網(wǎng)頁(yè)代碼中如何設(shè)置文字水平垂直居中的代碼？1如圖所示，我們創(chuàng)建一個(gè)框，然后在中間輸入文字信息2當(dāng)我們?cè)诳蛑刑砑舆吙蝾伾珪r(shí)，瀏覽器的效果如圖所示，文字在左邊的第一行3如果要將文字居中，可以輸入文
HTML網(wǎng)頁(yè)代碼中如何設(shè)置文字水平垂直居中的代碼？
1如圖所示，我們創(chuàng)建一個(gè)框，然后在中間輸入文字信息
2當(dāng)我們?cè)诳蛑刑砑舆吙蝾伾珪r(shí)，瀏覽器的效果如圖所示，文字在左邊的第一行
3如果要將文字居中，可以輸入文字對(duì)齊這是文字對(duì)齊樣式，然后在屬性中輸入center，即水平居中
4，如圖所示，使文本水平居中
5，并設(shè)置文本的垂直對(duì)齊方式。您可以根據(jù)不同的需要調(diào)整邊距或行值。這里，您使用line height將其設(shè)置為垂直中心，如圖所示，line height的屬性為line height。后面的屬性值設(shè)置為與父對(duì)象的框標(biāo)簽相同的高度。這樣，文本就可以垂直居中了
6如圖所示，最后的效果是這樣的。
div怎樣居中？HTML中div怎樣居中呢？
CSS實(shí)現(xiàn)div center，用CSS實(shí)現(xiàn)div center的方法有很多，這次教你的是一段比較簡(jiǎn)單而且兼容性很強(qiáng)的代碼，快進(jìn)來(lái)看看。
需要兩個(gè)主要的CSS代碼，一個(gè)是文本-對(duì)齊：居中（內(nèi)容在中間），另一個(gè)是邊距：0自動(dòng)這兩種樣式需要結(jié)合使用才能實(shí)現(xiàn)div-box的集中顯示。
首先，我們將文本設(shè)置為正文-對(duì)齊：居中和然后為需要居中的div框設(shè)置CSS樣式邊距：0自動(dòng)這樣，相應(yīng)的div可以水平居中。
Div定心代碼應(yīng)用，為了觀察Div定心的效果，我們?cè)O(shè)置了一個(gè)名為“的Div”。Div”在HTML的Div標(biāo)記中，使用class=“Div”，將其寬度設(shè)置為400px，高度設(shè)置為100px，邊框設(shè)置為紅色。這樣我們才能看到效果。
1. 完整的HTML CSS代碼
<！DOCTYPE HTML><html><head><meta charset=“UTF-8”/><title>div Center</Title><style> body{text}-對(duì)齊：居中}.div{邊距：0自動(dòng)寬度：400px高度：100像素邊框：1px實(shí)心#F00}/*CSS注意：要觀察效果，請(qǐng)?jiān)O(shè)置寬度、邊框高度和其他樣式*/</style></head><body>&Ltdiv class=“div”> div centering</div></body></HTML>
渲染：
這種居中方法使div居中效果與所有主要平臺(tái)和瀏覽器完全兼容，無(wú)論是高版本IE還是高版本IE。