如何让图片和文字分列两边设定css

html-css017

如何让图片和文字分列两边设定css,第1张

、在div中,使用p标签创建一行文字,使用img创建一张图片。

2、设置div标签的class属性为mydiv。

3、在css标签内,通过class设置div的样式,设置它的宽度为400px,边框为1px,并将display属性设置为flex,实现flex布局。

4、在css标签内,将align-items属性设置为center(水平居中),将justify-content属性设置为space-between(两端对齐)。

5、在浏览器打开test.html文件,查看实现的效果。

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

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

2、在index.html中的<style>标签中,输入css代码:img{float:left}。

3、浏览器运行index.html页面,此时div标签中的左侧图片与右侧图片通过css调整为了浮动而顶部对齐了。