当前位置： 移动技术网 > IT编程>网页制作>HTML > 让盒子水平居中解决方法！！！---（块元素，行内元素，行内块，文本）

让盒子水平居中解决方法！！！---（块元素，行内元素，行内块，文本）

2020年07月24日  | 移动技术网IT编程  | 我要评论

如何让盒子水平居中

在开发中我们会经常需要让一个盒子进行水平居中来达到某种效果，水平居中也是我们在开发中用到最多的！

1.让块级元素水平居中

HTML

    <div class="box">
        我是box盒子
        <div class="one">我是one盒子</div>
    </div>

CSS

        <style>
            .box {
                width: 300px;
                height: 300px;
                background-color: cornflowerblue;
                margin: 0 auto;/* 在浏览器中水平居中 */
            }
            .one{
                width: 100px;
                height: 100px;
                background-color: #ff6600;
                margin: 0 auto; /* 给子盒子添加margin属性实现在父盒子中水平居中 */
            }
        </style>

效果如下：
//为了让大家看的更清楚添加了文字，所以one盒子会距离上面有一段距离。

让块级盒子居中的方法非常简单，就是给块元素的盒子一个margin：0 auto属性。

2.让行内元素，行内块元素文本在盒子内进行水平居中

HTML

 <div class="box">
        <span>我是行内元素</span>
    </div>

CSS

<style>
        .box {
            width: 300px;
            height: 300px;
            background-color: cornflowerblue;
            text-align: center;/* 让文本水平居中 */
        }
</style>

让行内元素和行内块元素水平居中的方法就是给其父元素添加text-align: center;

效果图如下：

总结！！！

  1. 让行内元素 行内块元素 和文本水平居中的方法就是给其父元素添加text-align: center; 。
  2. 让块元素水平居中的方法就是给需要居中的盒子 添加margin: 0 auto; 。
  3. 行内块 和行内元素 添加**display: block;**转换成块元素后可以使用 margin: 0 auto; 进行水平居中。

本文地址：https://blog.csdn.net/m0_46456663/article/details/107528229

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网