Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to align text in CSS where both columns are straight?
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.
3K+ Views
To Continue Learning Please Login