You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

已解决:Bootstrap卡片图片与文本垂直错位问题修复

解决Bootstrap卡片图片与文本垂直居中对齐问题

要实现Bootstrap卡片内图片与文本并排显示,且标题+文本组合相对于图片垂直居中,但实际效果里文本区域偏在图片上方。

一开始排查了边距、内边距,还给.row添加了display:flex和align-items:center属性,甚至调整margin-top做临时补救,但这些方法都没彻底解决问题。

最后发现问题根源是全局img样式影响了所有图片标签:

img {
    width: 70%;
    height: auto;
    margin-top: 15%;
}

这个全局样式给所有图片添加了15%的顶部外边距,导致图片整体下移,视觉上呈现出文本偏上的效果。删除该全局样式,或者针对卡片内的图片单独编写样式进行覆盖,问题即可解决。

内容的提问来源于stack exchange,提问作者user92837

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.08.04 00:30:54