已解决:Bootstrap卡片图片与文本垂直错位问题修复
解决Bootstrap卡片图片与文本垂直居中对齐问题
要实现Bootstrap卡片内图片与文本并排显示,且标题+文本组合相对于图片垂直居中,但实际效果里文本区域偏在图片上方。
一开始排查了边距、内边距,还给.row添加了display:flex和align-items:center属性,甚至调整margin-top做临时补救,但这些方法都没彻底解决问题。
最后发现问题根源是全局img样式影响了所有图片标签:
img { width: 70%; height: auto; margin-top: 15%; }
这个全局样式给所有图片添加了15%的顶部外边距,导致图片整体下移,视觉上呈现出文本偏上的效果。删除该全局样式,或者针对卡片内的图片单独编写样式进行覆盖,问题即可解决。
内容的提问来源于stack exchange,提问作者user92837
相关产品推荐
相关产品推荐

