布局小技巧

 

 

 

line-height 设置行间的距离（行高），不允许负数。line-height等于height时，文字垂直居中显示。

text-align:：设置文字水平方向对齐，text-align:center则文字水平居中

vertical-align：设置垂直居中，该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐（按照下图解释就是悟空的基线，对于悟空所在行（即x）的基线的垂直对齐，就是和x中间交点水平对齐。字体x要设置为0，才能保证真正居中）;vertical-align：middle,把此元素放置在父元素的中部

 

 

 

 

例一：

 

 

第一部分：

内部元素不带有border、padding：

内部元素带有border、padding：

里面文字水平居中：

 

 

例二（和第一个区别是第一个里面元素是块元素，第二个元素是行内元素）：

 

说明：

1、行内元素、行内块元素在调整位置时，都可以通过调整文字的位置，调整他们的位置

 

 例三：