HTML各种情况居中总结

标签：os   strong   io   re   c   html   ar   line   

前提：　父盒子固定大小（宽高），其里面的“内容”在水平和垂直方向的居中对齐的常见做法：

内部居中：

       水平居中：

       　　A：“内容”为一行文字或文字性行内元素（span，a，b，u）：在父盒子上设置text-align:center;

       　　B：“内容”为具有一定形状的行内元素（如img，input，textarea）：同文字（Ａ）

       　　C：“内容”为块元素： margin:0 auto;

       垂直居中：

       　　A：“内容”为一行文字或文字性行内元素（span，a，b，u）：在父盒子上设置line-height为父盒子的高度；

       　　B：“内容”为具有一定形状的行内元素（如img，input，textarea）：同块元素（Ｃ）

      　　 C：“内容”为块元素： 在块元素上设置：position:relative;top为父盒子高度一半;margin-top为该块元素高度一半的负值

外部居中：

       img与textarea与其紧挨着的文字垂直居中对齐：设置其vertical-align:middle;

       input与紧挨着的文字自然垂直居中

HTML各种情况居中总结,布布扣,bubuko.com

HTML各种情况居中总结

标签：os   strong   io   re   c   html   ar   line   

原文地址：http://www.cnblogs.com/zixueit/p/3867991.html