CSS笔记（二） 水平居中和垂直居中/标签显示模式

1、水平居中和垂直居中

　　A.水平居中：

    　　（1）块元素如div（必须有宽）用内边距水平居中：margin：0 auto；

   　　 （2）行内元素水平居中（如文字）：text-align：center

           　　 （父元素设置text-align: center，子元素设置display: inline-block，子类都水平居中）

　　B.垂直居中：

    　　 （1）行内元素垂直居中（如文字）：用行高垂直居中，  heigth:50px; line-height:50px;

             　　（行高等于盒子大的高度，可以让单行文本垂直居中，对行内元素作用，如果行高=高度，文字垂直居中，>偏下，<偏上）

    　　  （2）垂直居中：vertical-align，使行内元素盒模型与其行内元素容器对其。只对行内元素、表格表单元 格元素生效，不能用来垂直对齐块元素。

 

 

 

2、标签显示模式（display：black/inline/inline-block）：

          块级元素（black）：div、

          文字类块级元素：p、h1

          行内元素（inline）：span、a（a内可以放块级元素）、u

          行内块元素（inline-block）：img

 

转换标签显示模式display：inline-block;行内块

 

例：a标签样式要加 display:inline-block; 才可以设置宽高；

                        text-align：center文字水平居中；

                        text-decoration：none去掉下划线

例：<span>是行内元素,span只有margin-left和margin-right才有效果。要想margin-top生效就要把span转给块级元素才行。