CSS--文字图片水平垂直居中

一、首先要了解行内元素和块级元素在居中时是不一样的,常用的行内元素(内联元素)有a标签,b粗体,br换行,em强调,font设置字体,i斜体,img图片,input输入,span常用内敛容器,label表格标签,strong强调,strike中划线等;常用块级元素有div,dl与dt,dd搭配使用的块级元素,form表单,ol非排序,ul排序表单,h1标题,hr水平分割线等,其次行内元素和块级元素之间可以通过display相互转化的

二、居中方法

1、块级元素文字水平居中,text-align使得文字或图片在水平方向居中,注意:在div中设置的text-align不仅可以在此div种的文字和图片居中而且还可以让子div中的图片或文字在子div中居中,这个地方注意哦,是子div中的文字是相对于子div居中

 

 2、块级元素文字垂直居中(块级元素高度确定的情况),将块级元素的height与line-height相同即可

3、块级元素文字水平居中(块级元素高度不确定的情况),设置padding-top、padding-bottom

4、块级元素自身的居中(确定了宽度的块)设置margin:0 auto 这会使得这个块级元素在它的父元素中上下左右都会居中,水平居中的话设置margin-left:auto;margin-right:auto

5、块级元素自身的居中(不确定宽度的块)如果不确定宽度的块此时这个块及时浏览器窗口的宽度,不必要设置水平居中。

6、<td><tr>居中:vertical-align:middle;使得文字或者图片紧靠他们的父元素进行居中的

7、行内元素的垂直居中:设置display:table-cell;vertical-align:middle;

 

posted @ 2021-01-15 11:23  雪地里的Alan  阅读(505)  评论(0编辑  收藏  举报