How to align text in CSS where both columns are straight?

HTML CSS Web Development Front End Technology

A stylesheet language called CSS (Cascading Style Sheets) is used to specify the appearance and formatting of an HTML document. Separating the presentation of content from the structure of a web page, CSS enables you to control the layout, color, font, and other styles of a website.

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

Approaches

The following are some typical methods for aligning text in CSS −

Using the text-align property
Using the display property
Using the float property

Let us look at each approach in detail with examples now.

Approach 1: Using “text-align” Property

The first approach for aligning the text in CSS where both the columns are straight is by using the “text-align” property. Text within a container element can be aligned using the text-align attribute. It accepts values like center, left, and justify.

Example

In the following example we are going to learn about how to align text in css using “text - align” property

Step 1 − Make a container element in HTML, like a div −

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

Step 2 − Make 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>

Step 3 − The container and column elements should have CSS styles added −

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

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

Step 6 − The final code looks like the code below −

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

Approach 2: Using the “display property”

To establish a flexible layout, set the display property to either flex or grid. Using the justify-content and align-items attributes, you may manage how elements are positioned in different layout modes.

Example

In the following example we are going to learn about how to align text in css using display property

Step 1 − Make a container element in HTML, like a div −

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

Step 2 − Make 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>

Step 3 − The container and column elements should have CSS styles added −

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

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

Step 6 − The final code looks like the code below −

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

Approach 3: Using the “float property”

An element can be floated to the left or right of its parent container using the float attribute. Text that aligns in many columns can be created using this to create multicolumn layouts.

Example

In the following example we are going to learn about how to align text in css using Flaot property

Step 1 − Make a container element in HTML, like a div −

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

Step 2 − Make 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>

Step 3 − The container and column elements should have CSS styles added −

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

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

Step 6 − The final code looks like the code below −

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

Conclusion

Either the text-align property or the display property in CSS can align text in two straight columns. The display property indicates an element's layout, such as whether it should be displayed as a block or an inline element.