温馨提示×

html怎么设置div居中

清风
4389
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