溫馨提示×

html怎么設置div居中

清風
4402
2021-03-24 19:17:02
欄目: 編程語言

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

html怎么設置div居中

html設置div居中的方法:

通過設置“左右margin”值為“auto”來實現居中。

操作步驟:

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標簽里面添加script標簽并設置居中樣式。

<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
亚洲午夜精品一区二区_中文无码日韩欧免_久久香蕉精品视频_欧美主播一区二区三区美女