如何在 Bootstrap 中将药丸对齐到中心？

Bootstrap 是一个免费的开源工具集，用于创建响应式网站和 Web 应用程序。如果您不熟悉 Bootstrap，我们强烈建议您阅读我们的 Bootstrap 4 介绍。

Pills 是一种带有更多圆角的 Bootstrap 徽章。默认情况下，药丸将充当内联块元素。此行为在 Bootstrap 的核心样式表之一 (_badge.scss) 中定义。

自从吃了药 是一个内联块元素，药丸的对齐方式由药丸的父容器中提到的对齐方式决定。如果父容器没有任何对齐规则，则样式将从药丸的最近祖先继承。

我们可以使用 Bootstrap 的内置文本对齐类text-center将一个药丸或一组药丸居中。如果我们将类text-center添加到药丸的父容器中，我们可以居中对齐药丸。

HTML

    Center aligned pills in a div by
    adding text-center class

 
 

    
        Primary
    
     
    
        Danger
    

HTML 代码：完整的 HTML 代码如下所示。您可以在我们的 IDE 中检查以下代码的工作情况

HTML

 

    Bootstrap Example
    
    
 
    
    
 
    
    
    
 
    
    
    
 
    
    
    

 

    
        GeeksforGeeks
         
A computer science portal for geeks
 
 
        
         

            Center aligned pills in a div by
            adding text-center class
        
 
 
        
            
                Primary
            
             
            
                Danger
            
        
    

 

输出：

引导药丸

类似地，我们可以使用text-right来右对齐药丸，使用text-left来左对齐药丸。

在某些情况下，无法将类text-center添加到父级，因为它会影响父级的其他样式。在这些情况下，推荐的方法是使用块级标签（例如 div 或段落标签）包装药丸