css中让文字和图片对齐的问题

Posted 2023-03-27

我在模仿w3school的时候遇到这样一个问题：因为图片不是一个行内元素吗？我在其后跟着写的文字不是会应该跟图片处于同一行吗？为什么会遇到右边这种情况。

html和css代码如下图

我尝试过其他方法，把图片和文字都另添加一个div，然后把图片的那个div高度改变调低会让文字上去一点，不知道是什么原因但这种可以完成效果。还有另外一种把img元素放在p元素内使用vertical-align属性但是没有丝毫变化。

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

p元素是块元素。和div是一样的。

所以虽然strong没有让文字换行，但是p让文字从另一行开始了。

有几种解决办法。

把图片做成背景。

图片加上float:left使它浮动

图片和右面的文字块做成display:inline-block，但是这个IE7以下不支持。还要加上*display:inline;*zoom:1;这样才支持。

图片和右面的文字块做成display:table-cell，但是IE7以下不支持。

用定位。在图片和文字块的父容器上加上position:relative，并定上高度。图片和文字块用position:absolute

本回答被提问者采纳

如何用CSS让文字左对齐，图片居中

参考技术A 方法如下：
一、行高（line-height）法
如果要垂直居中的只有一行或几个文字，那它的制作最为简单，只要让文字的行高和容器的高度相同即可，比如：

p

height:30px;

line-height:30px;

width:100px;

overflow:hidden;



这段代码可以达到效果。

二、内边距（padding）法
另一种方法和行高法很相似，它同样适合一行或几行文字垂直居中，原理就是利用padding将内容垂直居中，比如：

p

padding:30px;

参考技术B ，图片居中