移动设备上的引导中心徽章文本答案

【问题标题】：Bootstrap Center Badge Text on Mobile移动设备上的引导中心徽章文本
【发布时间】：2021-06-21 15:33:44
【问题描述】：

我在一个反应项目中使用了一个徽章元素 reactstrap。

 <Badge color="info">{item.price + "$"}</Badge>

徽章中的文本不是垂直居中对齐的，仅在移动设备上。在检查中将视图更改为移动设备时，它在 pc chrome 上运行良好，但仅在实际的移动设备上，文本未居中。

我尝试了垂直对齐中间和对齐项目中心等，但徒劳无功

【问题讨论】：

标签： javascript css reactjs bootstrap-4 reactstrap

【解决方案1】：

不确定，但试试这个：

在您的 css 文件中

   @media screen and (max-width: 768px) {
     .parentElement .badge {
       display: inline-flex !important;
       justify-content: center;
       align-items: center;   
     }
   }

指定父元素

【讨论】：

感谢您的回答，但没有成功

【解决方案2】：

最简单的方法是覆盖引导徽章类。原始徽章类具有“垂直对齐：基线”属性。在您的自定义 css 中覆盖 .badge 类并设置适合您设计的“vertical-align: text-top !important”或“vertical-align: middle !important”..

【讨论】：

感谢您的回答，但这不起作用