vertical-align实现图片和文字水平对齐

    技术2024-11-09  12

    文字旁边搭配图片时,发现图片比文字靠上,原来默认的情况是图片顶对齐而文字底对齐,通过设置css属性可以使得图片与文字对齐。

    方法一:设置各对象的vertical-align属性,这个属性有baseline(基线对齐)、top(顶端对齐)、middle(中线对齐)和bottom(底端对齐)。

    其中第一个baseline基线对齐,基线可以理解为小时候写拼音,大多数字母在四线三格中第二个的底线。在中文里,基线通常在文字底部往上1/5位置,这个取值对图片和文字对齐意义不大。

    top,是指当前元素与本行中最高的元素的顶端对齐,一排元素都设置顶端对齐,可以实现吊灯效果。

    middle,可以设置图片和文字的中线对齐,效果如下图。css样式为:

    img{  width: 70px;height: 80px;vertical-align: middle;} span{ vertical-align: middle; }

    bottom,与本行中最低元素底端对齐。可以实现平地摆花瓶效果。

     

    Processed: 0.030, SQL: 12