如何在 HTML 中使 div 居中对齐?

htmlweb developmentfront end technology更新于 2024/2/1 15:40:17

DIV 被称为分隔标签，顾名思义，它用于对网页内容进行划分。<DIV> 标签用于分隔网页数据，例如文本、图片、导航栏等。使用 DIV 标签，我们还可以创建特定的部分。

DIV 标签由打开和关闭标签 <DIV> </DIV> 组成，如果我们想要划分页面，打开和关闭标签都是必需的。

通过使用 class 或 id 属性，DIV 标签可以使用 CSS 轻松设置样式，也可以使用 JavaScript 进行操作。任何类型的数据都可以放置在 <div> 标签内。

示例

以下是 <DIV> 标签的示例 −

<html>
<head>
   <title>How to Represent Div Tags in HTML5</title>
   <style type=text/css>
      p {
         font-size: 15px;
         margin: 8px;
      }
      div {
         color: black;
         margin: 4px;
         font-size: 15px;
      }
   </style>
</head>
   <body>
      <p><b>HTML tutorial</b></p>
      <div>Introduction</div>
      <div>Forms</div>
      <div>Media Elements </div>
   </body>
</html>

执行上述程序后，将显示一个包含 div 元素和文本的网页，文本颜色将按指定颜色显示为黑色。

HTML 中的 DIV 居中对齐

以下是 DIV 居中对齐 − 的用法

要将 div 元素居中对齐，我们使用 −

"div style="text-align:center" "

要将 div 居中，我们可以使用如下所示的语法 −

"div style="margin: 0 auto" "

示例

以下是 <DIV> 居中对齐标签的示例 −

<html>
<head>
   <title>How to Represent Div Tags in HTML5</title>
   <style type=text/css>
      p {
         font-size: 15px;
         margin: 8px;
      }
      div {
         color: black;
         margin: 4px;
         font-size: 15px;
      }
   </style>
</head>
   <body>
      <div style="text-align:center; width: 300px;margin: 0 auto; border- style: dotted;">
         <p>Welcome to TutorialsPoint</p>
      </div>
   </body>
</html>

执行上述程序后，将显示一个 div 元素及其内部的 <p> 元素，并在代码中显示指定的文本。

现在让我们看看居中 DIV 的不同对齐方式

使用 CSS Margin Auto 居中 DIV

使用值 0 auto 的 简写 margin 属性 将块级元素(如 div)水平居中 −

示例

以下是使用 CSS Margin Auto 居中对齐 <DIV> 标签的示例 −

<html>
<head>
   <title>TutorialsPoint</title>
   <style type=text/css>
      .container {
         font-family: arial;
         font-size: 14px;
         margin: 25px;
         width: 350px;
         height: 200px;
         outline: dashed 1px black;
      }
      .child {
         width: 50px;
         height: 50px;
         background-color: blue;
         /* Center horizontally*/
         margin: 0 auto;
      }
   </style>
</head>
<body>
   <div class="container">
      <p><b>Center a Div with CSS Margin Auto</b></p>
      <div class="child"></div>
   </div>
</body>
</html>

运行上述程序时，将显示一个 div 元素，该元素的格式设置为居中，并使用 CSS 自动边距。

将 DIV 垂直和水平居中

要将 DIV 垂直和水平居中，我们需要知道要居中的元素的宽度和高度。

步骤

对于父元素，将position属性设置为relative。
将子元素的position属性设置为absolute，将top设置为50%，将left设置为50%。它使子元素的左上角垂直和水平居中。
应用设置为子元素高度一半的负上边距，以及设置为子元素宽度一半的负左边距。

示例

以下是 <DIV> 垂直和水平居中的示例 −

<html>
<head>
   <title>TutorialsPoint</title>
   <style type=text/css>
      .container {
         font-family: arial;
         font-size: 14px;
         margin: 25px;
         width: 350px;
         height: 200px;
         outline: dashed 1px black;
         position: relative;
      }
      .child {
         width: 50px;
         height: 50px;
         background-color: green;
         /* Center horizontally and vertically*/
         margin: -25px 0 0 -25px ;
         position: absolute;
         top: 50%;
         left: 50%;
      }
   </style>
</head>
   <body>
      <div class="container">
         <p><b>Center Both Vertically and Horizontally</b></p>
         <div class="child"></div>
      </div>
   </body>
</html>

当我们运行上述程序时，将显示一个 div 元素和一个子 div 元素，其格式为居中。