水平居中（文本）

乄夵乄夵

已于 2023-01-08 19:05:51 修改

阅读量98

点赞数

文章标签： css html 前端

于 2023-01-08 18:49:10 首次发布

本文链接：https://blog.csdn.net/m0_74904496/article/details/128603982

版权

text-align: center;

注意点：如果要这些元素水平居中，text-align: center;需要给这些元素的父元素设置

1.文本

<head>    
    <style>

        .box {

            width: 300px;

            height: 300px;

            background-color: gray;

            text-align: center;

        }

    </style>

</head>
<body>

    <div class="box">

        我是一个文本

    </div>

</body>

2.span标签，a标签

<head>  
    <style>

        .box {

            width: 300px;

            height: 300px;

            background-color: gray;

            text-align: center;

        }

        span {

            background-color: beige;

        }

        a {

            background-color: brown;

        }

    </style>

</head>

<body>

    <div class="box">

        <!-- span标签，a标签 -->

        <span>我是一个标签</span>

        <a href="#">a标签</a>

</body>

3.input标签，img标签

<head> 
    <style>

        .box {

            width: 300px;

            height: 300px;

            background-color: gray;

            text-align: center;

        }

    </style>

</head>

<body>

    <div class="box">

        <!-- input标签，img标签 -->

        <input type="text">

        <img src="./111.css">

    </div>

</body>

margin：0 auto;

注意点1.如果需要div，p，h（大盒子）水平居中，直接给当前元素本身设置即可

2.margin：0 auto;一般针对固定宽度的盒子，如果盒子没有设置宽度，默认占满父元素的宽度

<head>
     <style>

        .father {

            width: 400px;

            height: 400px;

            background-color:lemonchiffon;

            margin: 0 auto;

        }

        .son {

            width: 200px;

            height: 200px;

            background-color: khaki;

            margin: auto;

        }

    </style>

</head>

<body>

    <div class="father">

        <div class="son"></div>

    </div>

</body>