Question

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

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

html和css代码如下图

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





Answer 1

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

Answer 2

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

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

有几种解决办法。

1. 把图片做成背景。

2. 图片加上float:left使它浮动

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

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

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