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

神圣之风
  • 545

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

回复
阅读 3k
3 个回答

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

.card-body {
    display:flex;
    align-items:center;
}
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;
宣传栏