块级元素和行内元素--居中问题

1,343 阅读2分钟
text-align:center 没有用,
那就是该元素为块级元素,
需要将块级元素转为内联元素。或者对于块级元素p为块状元可以使用margin:0 auto;来控制居中。

块级元素和行内元素

1.行内元素:  

与其他行内元素并排
不能设置宽高,默认的宽度就是文字的宽度

文本级标签:p , span , a , b , i , u , em 
除了p之外,所有的文本级标签,都是行内元素

2.块级元素:

霸占一行,不能与其他任何元素并列。
能接受宽高,如果不设置宽度,那么宽度将默认变为父级的100%。

块级元素:所有的容器级标签,都是块级元素,以及p标签。
容器级标签:div , h系列 , li , dt ,dd

块级元素和行内元素的相互转换:

display:inline 块级元素转换为行级元素
display:block 行级元素转换为块级元素
  

对与行级元素居中方式

设置 text-algin=center

对于块级元素有以下几种居中方式:

1.水平居中

1.margin:0 auto;
将元素放置在table中,再将table的margin-left和margin-right设置成auto,将table居中,使在其之中的块级元素叶居中,但是这种方式不符合语义化标签的规范;  

2.将块级元素转换行内元素(通过设置display:inline)后再居中.这种方式使居中元素变成行内元素而致使无法设置宽高;  

3.设置父元素float:left,position:relative,left:50%;
  子元素float:left,position:relative,left:-50%,
  利用相对布局的方式居中.

2.垂直居中

1.对于知道高度的元素可以设置上下padding相等; 
2.设置line-height和height相等 
3.利用vertical-align,但是这属性只在tr,td中适用,故可将元素放置入table中在居中