1、新建一个html文件。
2、使用div标签创建一个模块。
3、在div标签内使用img标签创建一张图片。
4、在img标签内使用style来设置图片宽度和高度属性即可。
1、首先通过vertical-align:middle实现现图片与文字水平对齐,需要区分html是行内元素,还是块状元素,实现img、p及div水平居中对齐,则只需要在img的css中的vertical-align:middle;及将p和div(display:inline-block)转化为行内元素。
2、实现img、span水平居中对齐,由于这两者都是行内元素。
3、则只需要在img的css中的vertical-align:middle;span标签什么都不需要添加。
4、通过flex布局实现图片与文字水平对齐,只需要在父级元素中css添加。
5、子级元素则不需要像上面那样添加vertical-align:middle,这样就可以了。