編碼的世界 / 優質文選 / 生涯

DIV CSS字體居中實現DIV文字水平左右居中

2022年7月02日
-   

DIV CSS字體居中實現DIV CSS文字水平左右居中-css+div字體文字內容居中篇，使用DIV CSS實現字體居中的CSS樣式單詞為text-align，其值為center（居中）。
div{text-align:center}

這樣就會讓HTML中所有DIV盒子內的文字、圖片內容居中顯示，實現左右水平居中CSS樣式。
`1.讓網頁所有DIV標簽內文字居中 
 實現所有DIV內字體居中實例完整網頁源代碼：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">





<head>
<meta charset="utf-8" />
<title>div字體居中實例</title>
<style>
div{text-align:center}
</style>
</head>
<body>
<div>我將被居中</div>
</body>
</html>

2.實現對指定div內容居中 要實現對網頁中某個DIV對象內文字字體居中，我們需要CSS命名新建一個用於CLASS或ID的CSS選擇器，在網頁中需要地方使用id或class調用命名即可。
這裏命名為“.divcss”，html中使用class引用。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">





<head>
<meta charset="utf-8" />
<title>div字體居中實例</title>
<style>
divcss5{text-align:center}
</style>
</head>
<body>
<div>我沒有設置居中css樣式</div>
<div class="divcss5">我將被居中</div>
</body>
</html>

熱門文章