比较text-align:center 和margin:0 auto

文本对齐与元素居中：CSS技巧解析

最新推荐文章于 2021-03-26 21:12:35 发布

原创最新推荐文章于 2021-03-26 21:12:35 发布 · 307 阅读

1 ·

CC 4.0 BY-SA版权

HTML 专栏收录该内容

1 篇文章

订阅专栏

本文详细讲解了CSS中的`text-align`属性用于文本水平对齐，以及如何使用`margin: 0 auto`实现块级元素居中。通过实例演示了如何让div内的文本和h1标签居中，并揭示了浮动、定位对居中效果的影响。

① text-align: 设置元素内文本或img标签等一些行内元素的水平对齐方式，作用于元素的内容或子元素。
注意：text-align 不会控制元素的对齐，而只影响内部内容。元素本身不会从一段移到另一端，只是其中的文本受影响。

div内的文本居中：

 <div>
        <h1>这是标题 1</h1>
        <h2>这是标题 2</h2>
        <h3>这是标题 3</h3>
    </div>

 <style>
        div {
            text-align: center
        }
    </style>

h1内的文本居中

<h1>这是标题 1</h1>

 <style>
       h1 {
            text-align: center
        }
    </style>

② margin:0 auto ；设置块级元素或者行内块级元素的居中，直接作用于元素本身。
注意：浮动、绝对定位、固定定位的盒子失效。相对定位有效，但是如果left值不为0，在水平方向上不会居中，因为偏差了一个left值。
对于带有宽度的块级元素，margin auto是不会失效的。