如何使用 HTML 水平对齐两个 div？

在本文中，我们将学习如何在 HTML 中对齐 2 个 div。

标签是一个块级元素，即它总是从一个新行开始，并占据左右两侧可用的所有宽度。它还具有顶部和底部边距。

标签用于分隔内容块或在 HTML 中定义一个部分。

标签的主要用途是作为 HTML 元素的容器。它使在这些元素上使用 CSS 和 JavaScript 变得更加容易。类和 id 属性可以与这些标签一起使用。

2个div水平对齐的问题：由于

标签是块元素，一行只能放一个div，左右的空间都被它占据。让我们看看下面的例子来更好地理解它。

例子：

HTML

  

    

  

    

        

            
1.
            
2.
            
3.
        
        

            
GeeksforGeeks
            
Geeks Portal
            
Writing Portal
        
    

  

输出：

在这里，使用了 2 个锚标签。由于锚标记是一个内联元素，第二个链接就在输出中的第一个链接之后。但是，如果我们使用

标签，则可以使第二个链接转到下一行。以下示例说明了这一点：

例子：

HTML

  

    Click here!
    
This is a link

  

输出：

很明显，使用

标记在另一行上获取了第二个链接，因为它获取了整个行宽。如果

是一个内联标签，那么默认情况下两个 div 会水平对齐。

水平对齐 2 个 div 的方法：我们有两个可以使用 CSS 水平对齐的 div。有几种方法可以执行此任务。我们将按顺序理解所有概念。

1. 为两个 div 使用一个全局类：我们可以 将两个 div 放在一个具有类属性的父 div 中。 class 属性值将用于设置 div 的样式。在示例中，两个 div 标记都包含在另一个具有main类的

标记中。然后在        

        

            

1.

            

2.

            

3.

        

        

            

GeeksforGeeks

            

Geeks Portal

            

Writing Portal

        

    

  

输出：

2、使用flex属性： CSS中的flex属性是flex-grow、flex-shrink、flex-basis属性的组合。用于设置弹性项目的长度。 flex 属性响应迅速且对移动设备友好。定位子元素和主容器很容易。边距不会随内容边距折叠。无需编辑 HTML 部分即可轻松更改任何元素的顺序。 我们可以结合一个父 div 类，CSS flex属性可以用来对齐两个相邻的 div。

CSS flex 属性用于设置灵活元素的灵活长度。

句法：

flex: flex-grow flex-shrink flex-basis|initial|auto|inherit;

属性值：

• flex-grow：一个数字，指定相对于其余灵活项目将增长多少项目。
• flex-shrink：一个数字，指定相对于其余的灵活项目将收缩多少项目。
• flex-basis：设置项目的长度。 flex-basis 的合法值为：auto、inherit 或数字后跟 %、em、px 或任何其他长度单位。

示例：在此示例中，我们使用了一个display属性，其值设置为 flex，用于设置灵活项目的长度。

HTML

  

    

  

    

        

            
1.
            
2.
            
3.
        
        

            
GeeksforGeeks
            
Geeks Portal
            
Writing Portal
        
    

  

输出：

3. div 的单独样式：两个

标签也可以使用 style 属性单独设置样式。

例子：

HTML

  

    

        
1.
        
2.
        
3.
    
    

        
GeeksforGeeks
        
Geeks Portal
        
Writing Portal
    

  

输出：第一个

标签向左浮动，第二个

标签向右浮动。但是，它们彼此水平对齐，空间很大。可以更改宽度以更改此空间。