Introduction: To align text in CSS there are lots of options available. Basically columns are straight always in CSS or in HTML, but here the columns are straight means that the gap between columns and the number of lines in each column should be equal.
Approach: In CSS each column act as a box, so how alignment works and controlled is totally depend on the Box-alignment module, this module aims to create a consistent method of alignment across all of CSS. So by using the Box-alignment modules property we can align the text where two or more than two columns are straight. By using the CSS align-content property
we can control the block axis and by CSS justify-content property to control inline axis. But the mail role is played by the CSS column-gap property, without this property task can not be completed. But by using only this property we can achieve the task.
Below examples illustrate the approach:
Example 1:
css
<!DOCTYPE html>
<html>
<head>
<style>
.gfg {
-webkit-column-count: 2 ;
-moz-column-count: 2 ;
column-count: 2 ;
-webkit-column-gap: 40px ;
-moz-column-gap: 40px ;
column-gap: 40px ;
}
h 1 {
color : green ;
}
h 1 , h 2 {
text-align : center ;
}
</style>
</head>
<body>
<h 1 >
GeeksforGeeks
</h 1 >
<!-- Columns with a gap of 40px between
the columns -->
<div class= "gfg" >
The course is designed for students as well as
working professionals to prepare for coding
interviews. This course is going to have coding
questions from school level to the level
needed for product based companies like Amazon,
Microsoft, Adobe, etc.
</div>
</body>
</html>
|
Output:
