css怎样使得图片底部对齐

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，这样就可以了。

需要准备的材料分别有：电脑、浏览器、html编辑器。

1、首先，打开html编辑器，新建html文件，例如：index.html。

2、在index.html中的<style>标签中，输入css代码：

div{

border: 1px solid blue

width: 300px

text-align: justify

}

div:after {

display: inline-block

width: 100%

content: ''

}

3、浏览器运行index.html页面，此时一行内的文字实现了两端对齐。

---