对齐方式总结

父元素一定是块元素,根据子元素不同分为以下几种:

1.子元素是行内元素:如:a,span 

    a.水平居中:在父元素上设置: text-align:center;

    b.垂直居中:在行内子元素上设置行高与父元素相同: line-height

2. 子元素是多行内联文本

    a.水平居中:父元素设置text-align:center 

    b.垂直居中:父元素设置:display:table-cell;vertical-align:middle

3. 子元素是块元素:

    a.水平居中:子元素设置左右自动: margin: auto;

    b.垂直居中:与多行内联文本处理方式一致:display:table-cell;vertical-align:middle

4. 子元素是不定宽的块元素:最常见的分页导航

a.水平居中:子元素转行内元素,父元素加:text-align:center 

b.垂直居中:可给分页的ul加行高line-height=parent.height 

c.底边居中:更为常用,与多行内联文本垂直处理方式一致,vertical-align:bottom;