前端小问题-图文混排时

可以看到下面的截图图1,左边图片,右面是文字,就会存在文字与图像的对齐问题。我们期待的是文字不要这么靠下。最初试图通过padding and margin都没有很好的解决。

事实上,本质原因是图文混排的默认值是vertical-align:baseline.显示效果为图一。基线是在图片最底部还要靠下的位置。

当我们设置为vertical-align:middle 或者vertical-align:bottom 都可以改变文字对齐。图2是将对齐方式改为居中的效果。

虽然代码简单,但是学习之初,经常会忽略这类小问题的本质原因。

Ps:脚本之家的解释更为详尽http://m.jb51.net/css/177178.html


图1
图2
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 有些东西我们经常用,但是我们却并不了解它的原理,所以一旦换了场景,好多东西就不知道该怎么用了。最近一直很纠结ver...
    朱小维阅读 10,454评论 8 34
  • 转载声明:此文章为转载(),点击查看原文。如有侵权24小时内删除。联系QQ:1522025433 一、关于今天,本...
    暗恋桃花源丫阅读 4,097评论 0 4
  • vertical-align这个属性,我知道的有三个用途,其中两个好理解,兼容性也比较好,第三个差一些。 垂直文本...
    Miss____Du阅读 5,713评论 0 15
  • 移动开发基本知识点 一.使用rem作为单位 html { font-size: 100px; } @media(m...
    横冲直撞666阅读 8,904评论 0 6
  • 我喜歡在腦海裡回憶一些畫面 像是溫習一段時光 像是用回憶做紀念 時間是能讓你忘掉一些你曾經認為非常重要的人 可...
    紫色茜茜阅读 721评论 0 0

友情链接更多精彩内容