HTML 如何在两列都是直的情况下对齐文本

HTML 如何在两列都是直的情况下对齐文本

一种叫做CSS(层叠样式表)的样式表语言被用来指定HTML文档的外观和格式。将内容的呈现与网页的结构分开,CSS使你能够控制网站的布局、颜色、字体和其他样式。

你可以使用CSS的display: table属性来构建一个类似于表格的结构,当两列都是直线时,就可以在CSS中对齐文本。然后,为了适当地对齐文本,在使用display: table-cell属性时,将顶部或底部作为每一列的垂直对齐属性。

方法

以下是一些在CSS中对齐文本的典型方法 −

  • 使用text-align属性

  • 使用display属性

  • 使用float属性

现在让我们通过实例来详细了解每一种方法。

方法1:使用 “text-align “属性

在CSS中,如果两列都是直的,第一个方法是使用 “text-align “属性来对齐文本。容器元素中的文本可以使用text-align属性进行对齐。它可以接受居中、向左和对齐等值。

例子

在下面的例子中,我们将学习如何使用 “text-align “属性来对齐css中的文本

第1步 --在HTML中制作一个容器元素,如div —。

<div class="container">
   <!-- Your content goes here -->
</div>

第2步 --为容器元素内的两列制作两个子元素—-。

<div class="container">
   <div class="left-col">
      <!-- Left column content goes here -->
   </div>
   <div class="right-col">
      <!-- Right column content goes here -->
   </div>
</div>

第3步 --容器和列元素应该添加CSS样式—-。

.container {
   display: flex;
   justify-content: space-between;
}
.left-col {
   width: 49%;
   text-align: left;
}
.right-col {
   width: 49%;
   text-align: right;
}

Step 4 − Fill up the column elements with content −

<div class="container">
   <div class="left-col">
      <p>Left column content</p>
   </div>
   <div class="right-col">
      <p>Right column content</p>
   </div>
</div>

第5步 - 通过在电脑浏览器中预览结果,你可以观察到文字被安排在两个直列中。

第6步 - 最终的代码看起来像下面的代码 –

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
   <style>
      .container {
         display: flex;
         justify-content: space-between;
      }
      .left-col {
         width: 49%;
         text-align: left;
      }
      .right-col {
         width: 49%;
         text-align: right;
      }
   </style>
</head>
<body>
   <div class="container">
      <div class="left-col">
         <p>Left column content</p>
      </div>
      <div class="right-col">
         <p>Right column content</p>
      </div>
   </div>
</body>
</html>

方法2:使用 “display属性”

要建立一个灵活的布局,将显示属性设置为flex或grid。使用justify-content和align-items属性,你可以管理元素在不同布局模式下的定位方式。

例子

在下面的例子中,我们将学习如何在css中使用display属性来对齐文本

第1步 --在HTML中制作一个容器元素,如div —–。

<div class="container">
   <!-- Your content goes here -->
</div>

第2步 --为容器元素内的两列制作两个子元素—-。

<div class="container">
   <div class="left-col">
      <!-- Left column content goes here -->
   </div>
   <div class="right-col">
      <!-- Right column content goes here -->
   </div>
</div>

第3步 --容器和列元素应该添加CSS样式—-。

.container {
   display: flex;
   justify-content: space-between;
}
.left-col {
   width: 49%;
}
.right-col {
   width: 49%;
}

Step 4 − Fill up the column elements with content −

<div class="container">
   <div class="left-col">
      <p>Left column content</p>
   </div>
   <div class="right-col">
      <p>Right column content</p>
   </div>
</div>

第5步 - 通过在电脑浏览器中预览结果,你可以观察到文字被安排在两个直列中。

第6步 - 最终的代码看起来像下面的代码 –

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
   <style>
      .container {
         display: flex;
         justify-content: space-between;
      }
      .left-col {
         width: 49%;
      }
      .right-col {
         width: 49%;
         text-align: right;
      }
   </style>
</head>
<body>
   <div class="container">
      <div class="left-col">
         <p>Left column content</p>
      </div>
      <div class="right-col">
         <p>Right column content</p>
      </div>
   </div>
</body>
</html>

方法3:使用 “float属性”

一个元素可以使用浮动属性浮动到其父容器的左边或右边。在许多列中对齐的文本可以用它来创建多列布局。

例子

在下面的例子中,我们将学习如何在css中使用Flaot属性来对齐文本

第1步 --在HTML中制作一个容器元素,如div —

<div class="container">
   <!-- Your content goes here -->
</div>

第2步 --为容器元素内的两列制作两个子元素—-。

<div class="container">
   <div class="left-col">
      <!-- Left column content goes here -->
   </div>
   <div class="right-col">
      <!-- Right column content goes here -->
   </div>
</div>

第3步 --容器和列元素应该添加CSS样式—-。

.left-col {
   width: 49%;
   float: left;
   text-align: left;
}
.right-col {
   width: 49%;
   float: right;
   text-align: right;
}

Step 4 − Fill up the column elements with content −

<div class="container">
   <div class="left-col">
      <p>Left column content</p>
   </div>
   <div class="right-col">
      <p>Right column content</p>
   </div>
</div>

第5步 - 通过在电脑浏览器中预览结果,你可以观察到文字被安排在两个直列中。

第6步 - 最终的代码看起来像下面的代码 –

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
   <style>
      .left-col {
         width: 49%;
         float: left;
         text-align: left;
      }
      .right-col {
         width: 49%;
         float: right;
         text-align: right;
      }
   </style>
</head>
<body>
   <div class="container">
      <div class="left-col">
         <p>Left column content</p>
      </div>
      <div class="right-col">
         <p>Right column content</p>
      </div>
   </div>
</body>
</html>

结论

CSS中的text-align属性或display属性都可以使文本在两个直列中对齐。display属性表示一个元素的布局,比如它是应该作为一个块还是一个内联元素来显示。

Python教程

Java教程

Web教程

数据库教程

图形图像教程

大数据教程

开发工具教程

计算机教程