水平居中

行内元素

文字等行内元素直接利用text-align:center即可,图片则需要先包裹在一个块级元素中,随后对块级元素添加text-align:center才可。因为text-align是作用在块级元素中的行内元素上的。

块级元素

确定宽度的块级元素

通过给确定宽度的块级元素设置margin-right: auto和margin-left: auto;来实现其水平居中

不确定宽度的块级元素

方法一:
将需要水平居中的块级元素包裹在

标签中的
中并设置为行内元素,通过给设置margin-right: auto和margin-left: auto;来实现水平居中。缺点是代码过于冗长。


    
    
2222222
不确定宽度.png

方法二:
将不确定宽度的块级元素设为行内元素,并包裹在一个块级元素中,对该块级元素设置text-align: center;即可。
缺点是无法为不确定宽度的块级元素设置宽高。


    
    
33333333
方法二.png

方法三:
通过给父元素设置float: left;position: relative;left: 50%;,子元素设置position: relative;left: -50%;来实现水平居中。
缺点是元素脱离文档流。


    
    
33333333
方法三.png

你可能感兴趣的:(水平居中)