Aligning the text vertically using CSS properties

Aligning the text vertically using CSS properties
Is it possible to align the text vertically??? Yes it possible to align the text vertically using CSS properties, there are 2 ways to achieve this
1. Aligning the text vertically by using CSS line-height property and CSS3 rotate property.
2. Aligning the text vertically by using CSS position property(relative,absolute) and CSS3 rotate property.

In websites by aligning the text vertically helps in getting the quick attention of the visitors and in few particular places of the websites by aligning the headings/titles vertically makes the website attractive.

Aligning the text vertically by using CSS line-height property and CSS3 rotate property

First create a div element with class:box; and then add the content inside the div element and then style the div element.

.box{
         width: 100px;
         height: 250px;
         background-color: #fff;
         box-shadow: 0 2px 4px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);
         margin: 20px;
}

Style the para element inside the div element and use transition: rotate(90deg); to align the text vertically, then line-height property.

.box p{
           font-weight: bold;
           text-align:  center;
           color: rgb(0, 191, 182);
           text-transform: uppercase;
           font-family: 'Overpass Mono', monospace;
           font-size: 18px;
           transform: rotate(90deg); 
           line-height:200px;
 }

Aligning the text vertically by using CSS position property (relative,absolute) and CSS3 rotate property

Create a div element with class:box-1; and then add the content inside the div element and then style the div element by giving position:relative;.

.box-1{
         width: 100px;
         height: 250px;
         background-color: #fff;
         box-shadow: 0 2px 4px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);
         position: relative;
         margin: 20px;
}

Style the para element inside the div element and use transition: rotate(90deg); to align the text vertically, use position:absolute; to move the content to the center of the div by adjusting the top and left properties.

.box-1 p{
           font-weight: bold;
           text-align:  center;
           color: rgb(0, 191, 182);
           text-transform: uppercase;
           font-family: 'Overpass Mono', monospace;
           font-size: 18px;
           transform: rotate(90deg); 
           position: absolute;
           top: 110px;
           left: -18px;
 }

NOTE : Do not confuse yourself with vertical-align property, here in this article (aligning vertically) is nothing to do with CSS vertical-align property.

See the Pen vertical text by rajeshdn (@cool_lazyboy) on CodePen.0