溫馨提示×

css如何設置div居中

小新
325
2021-04-27 13:35:13
欄目: 編程語言

css設置div居中的方法:1.創建html文件;2.添加html架構代碼到html文件中;3.在body標簽中使用div標簽設置div盒子;4.添加style標簽并給div設置居中樣式;5.通過瀏覽器方式查看設置效果。


css如何設置div居中

具體操作步驟:

1.首先創建一個html文件。

2.將html架構代碼添加到html文件中。

<!DOCTYPE html>

<html>

<head>

<title>div居中</title>

</head>

<body>

</body>

</html>

3.在html架構中的body標簽里面使用div標簽設置一個div盒子。

<div>定寬塊狀元素水平居中</div>

4.在html架構中的html標簽里面添加style標簽并設置css居中樣式。

<style>

div{

border:1px solid red;

width: 200px;    /*定寬*/

margin:20px auto;   /*margin-left 與 margin-right 設置為 auto*/

}

</style>

5.最后可通過瀏覽器方式閱讀html文件查看設置效果。

完整示例代碼:

<!DOCTYPE html>

<html>

<head>

<title>div居中</title>

</head>

<style>

div{

border:1px solid red;

width: 200px;    /*定寬*/

margin:20px auto;   /*margin-left 與 margin-right 設置為 auto*/

}

</style>

<body>

<div>定寬塊狀元素水平居中</div>

</body>

</html>


0
亚洲午夜精品一区二区_中文无码日韩欧免_久久香蕉精品视频_欧美主播一区二区三区美女