基础 CSS 浮动中心类

Foundation CSS是由 ZURB 基金会于 2011 年 9 月构建的开源和响应式前端框架，可以轻松设计漂亮的响应式网站、应用程序和电子邮件，使其看起来很棒并且可以在任何设备上访问。它被许多公司使用，例如 Facebook、eBay、Mozilla、Adobe，甚至迪士尼。该框架建立在类似 Saas 的引导程序上。它更加复杂、灵活且易于定制。它还带有 CLI，因此很容易与模块捆绑器一起使用。它提供了 Fastclick.js 工具，用于在移动设备上更快地呈现。

Foundation CSS Float 类允许我们向元素添加常见的定位行为。 Foundation CSS 有多个 Float 类，例如 Float Left、Float Right 和 Float Center。在本文中，我们将了解浮动中心类。

Foundation CSS Float Center 类用于使用自动边距居中技巧来居中对齐

内的元素。这仅适用于具有绝对宽度的元素。为了在 Foundation CSS 中使用浮动中心效果，我们使用“float-center”类。

基础 CSS 浮动中心类：

• float-center： float-center 类将元素对齐到父
  的绝对边距的中心。

句法：

Content

示例 1：以下示例演示了 元素中的 Float 中心类。

HTML

  

    
    
  
    
    
    
    
    
    
        .main{
            width: 700px; 
            Height: 500px; 
            background-color: green;
            padding: 100px;
        }
    

  

    
        GeeksforGeeks
    
    
        Foundation CSS Float Center
    
    
    
    
    

  

输出：

输出

示例 2：以下示例演示了卡片内

和 元素中的 Float 中心类。

HTML

  

    
    
  
    
    
    
    
    
    
        .main{
            width: 300px; 
            Height: 300px; 
            padding: 20px;
            background-color: gray;
        }
    

  

    
        GeeksforGeeks
    
    
        Foundation CSS Float Center
    
    
    
        
          GeeksforGeeks
        
        

  

输出：

输出

参考： https://get.foundation/sites/docs/float-classes.html#float-center