bootstrap中的card设置了height之后文字就不居中了,怎么办?

image.png
如图设置了一个height之后,card的文字就不居中了,这是为什么,应该怎么处理呢?

阅读 968
评论
    3 个回答

    原始的 heightline-height 这两个 css 属性值应该是一样的(注:这两个属性一样的时候视觉上就是水平居中的)
    你修改之后变成了 height: 30px, 但是 line-height 不是 30,最简单的解决办法就是 flex 布局

    .card-body {
        display:flex;
        align-items:center;
    }
      • 1.1k
      heigth:30px;
      line-height:30px;

      或者

      display:flex;
      align-items:center;

        bootstrap 是靠两个 padding 把元素挤到中间的,你自己设定高度肯定不居中了,你要么用 flex 布局,要么设置行高

        .card-body {
            display:flex;
            align-items:center;
        }
        heigth:30px;
        line-height:30px;
          撰写回答

          登录后参与交流、获取后续更新提醒