How can I align text in CSS so that both columns stay straight?-HTML Tutorial-php.cn

How can I align text in CSS so that both columns stay straight?

CSS (Cascading Style Sheets) is a style sheet language used to specify the appearance and formatting of HTML documents. By decoupling the presentation of content from the structure of the web page, CSS enables you to control the layout, colors, fonts, and other styles of your website.

You can use CSS's display: table property to build a table-like structure so that both columns are straight when aligning text in CSS. Then, when using the display: table-cell attribute, set top or bottom as the vertical-align attribute for each column to align the text appropriately.

method

The following are some typical ways to align text in CSS -

Using text alignment properties
Use display attribute
Use floating properties

Now let us understand each method in detail with examples.

Method 1: Use the "text-align" attribute

The first way to align text (both columns are straight) in CSS is to use the "text-align" property. Text within a container element can be aligned using the text-align property. It accepts values such as center, left and align.

Example

In the following example, we will learn how to align text in CSS using the "text-align" property

Step 1 - Create a container element in HTML, such as a div -

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

Copy after login

Step 2 - Create two child elements for the two columns inside the container element -

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

Copy after login

Step 3− CSS styles should be added to container and column elements −

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

Copy after login

Step 4 - Populate 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>

Copy after login

Step 5 - You can observe the text arranged in two straight columns by previewing the results in your computer browser.

Step 6 - The final code looks like this -

<!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>

Copy after login

Method 2: Use "display attribute"

To create a flexible layout, set the display property to flex or grid. Using the justify-content and align-items properties, you can manage the position of elements in different layout modes.

Example

In the following example, we will learn how to use the display attribute to align text in css

Step 1 - Create a container element in HTML, such as a div -

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

Copy after login

Step 2 - Create two child elements for the two columns inside the container element -

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

Copy after login

Step 3− CSS styles should be added to container and column elements −

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

Copy after login

Step 4 - Populate 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>

Copy after login

Step 5 - You can observe the text arranged in two straight columns by previewing the results in your computer browser.

Step 6 - The final code looks like this -

<!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>

Copy after login

Method 3: Use "float attribute"

Using the float attribute, an element can float to the left or right side of its parent container. You can use this to create text aligned in multiple columns to create a multi-column layout.

Example

In the following example, we will learn how to align text in CSS using the Float property

Step 1 - Create a container element in HTML, such as a div -

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

Copy after login

Step 2 - Create two child elements for the two columns inside the container element -

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

Copy after login

Step 3− CSS styles should be added to container and column elements −

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

Copy after login

Step 4 - Populate 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>

Copy after login

Step 5 - You can observe the text arranged in two straight columns by previewing the results in your computer browser.

Step 6 - The final code looks like this -

<!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>

Copy after login

in conclusion

Whether it is the text-align attribute or the display attribute in CSS, you can align text into two upright columns. The display attribute indicates the layout of the element, such as whether it should be displayed as a block-level element or an inline element.

The above is the detailed content of How can I align text in CSS so that both columns stay straight?. For more information, please follow other related articles on the PHP Chinese website!