css 设置图片与文字的对齐方式 求教

html-css016

css 设置图片与文字的对齐方式 求教,第1张

这里给你解释一下 <p>也算是一个容器，什么叫容器，比如罐子，碗，等，可以在里面放东西的都属于容器 而<img>不是容器，只是显示反映图片 <p style="text-align:left" 为什么写在<p>里面，举例说明，一个纸盒子，我里面放个球，那么我想把球放到中间，那么你说，我的操作是对于哪个而言呢？ 这个中间，肯定是对应于纸盒子，而非球 所以，这里的style 是写在p里面 而不是 img 至于style="vertical-align我也不大清楚，你可以去百度查一下这个属性的意思。

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

img是内联元素，p标签是块级元素，所以p标签内的文字换行很正常。strong标签是内联元素，所以会跟img处于同一行，想要img跟strong中的文字垂直居中对齐，需要设置img的vertical-align为middle。