HTML各种情况居中总结

时间:2021-12-27 18:42:41

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

内部居中:

       水平居中:

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

         B:“内容”为具有一定形状的行内元素(如img,input,textarea):同文字(A)

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

       垂直居中:

         A:“内容”为一行文字或文字性行内元素(span,a,b,u):在父盒子上设置line-height为父盒子的高度;

         B:“内容”为具有一定形状的行内元素(如img,input,textarea):同块元素(C)

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

外部居中:

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

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