css实现图片和文字水平居中对齐

1.  

2. 一、通过vertical-align:middle实现现图片与文字水平对齐，需要区分html是行内元素，还是块状元素；例如：标签img、span是行内元素；标签p是块状元素则需要将标签p通过diaplay:inline-block;转化为行内元素；

3. 1、实现img、p及div水平居中对齐，则只需要在img的css中的vertical-align：middle；及将p和div（display：inline-block）转化为行内元素；

   

   

4. 实现img、span水平居中对齐，由于这两者都是行内元素；则只需要在img的css中的vertical-align：middle；span标签什么都不需要添加；

   

   

5. 二、通过flex布局实现图片与文字水平对齐

   只需要在父级元素中css添加：

   display:flex;

   flex-direction:row;

   align-items:center;

   子级元素则不需要像上面那样添加vertical-align：middle；

   

   

6. 总结：vertical-align:middle 与flex布局处理图片与文字水平居中对齐的区别；前者只要针对标签比较少的，及css的内用是写在子级的；后者针对需要实现很多标签水平居中对齐比较方便，及css主要写在父级上；