欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-06-23 11:14:57
text-align: 设置元素内文本或img标签等一些行内元素的水平对齐方式,作用于元素的子元素。margin:0 auto ;设置块级元素或者行内块级元素的居中,直接作用于元素本身。注意:浮动、绝对定位、固定定位的盒子失效。相对定位有效,但是如果left值不为0,在水平方向上不会居中,因为偏差了一个left值。对于带有宽度的块级元素,margin auto是不会失效的。......

① 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是不会失效的。

本文地址:https://blog.csdn.net/puddingcsdn/article/details/109254011

相关标签: HTML