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

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

html和css代码如下图

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

推荐于2017-12-15 · 小小的鱼儿小小的我,我就是言小鱼。
言言言小鱼
采纳数:1335 获赞数:7608

向TA提问 私信TA
展开全部
  img是内联元素,p标签是块级元素,所以p标签内的文字换行很正常。strong标签是内联元素,所以会跟img处于同一行,想要img跟strong中的文字垂直居中对齐,需要设置img的vertical-align为middle。
博思aippt
2024-07-20 广告
作为深圳市博思云创科技有限公司的工作人员,对于Word文档生成PPT的操作,我们有以下建议:1. 使用另存为功能:在Word中编辑完文档后,点击文件->另存为,选择PowerPoint演示文稿(*.pptx)格式,即可将文档内容转换为PPT... 点击进入详情页
本回答由博思aippt提供
百度网友b30ab76
推荐于2016-09-22 · TA获得超过1570个赞
知道小有建树答主
回答量:397
采纳率:100%
帮助的人:484万
展开全部

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

本回答被提问者采纳
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

下载百度知道APP,抢鲜体验
使用百度知道APP,立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

辅 助

模 式