Skip to content
Related Articles

Related Articles

How to align text in CSS where both columns are straight?
  • Last Updated : 16 Sep, 2020

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:





<!DOCTYPE html> 
    .gfg { 
        -webkit-column-count: 2
        -moz-column-count: 2
        column-count: 2
        -webkit-column-gap: 40px
        -moz-column-gap: 40px
        column-gap: 40px; /* Specifying Column Gap */ 
    h1, h2
    <!-- 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 Amazom, 
        Microsoft, Adobe, etc. 




My Personal Notes arrow_drop_up
Recommended Articles
Page :