How to align center text with CSS?

Question

I have a div tag which contains text, and I want to align the contents of this div vertically center.

Here is my div style:

 div {
     height: 200px;
     line-height: 200px;
     text-align: center;
     border: 2px dashed #f69c55;
   }
   span {
     display: inline-block;
     vertical-align: middle;
     line-height: normal;
   }

Here is my html

 <div>
   <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Haec et tu ita posuisti, et verba vestra sunt. Non enim iam stirpis bonum quaeret, sed animalis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Haec et tu ita posuisti, et verba vestra sunt. Non enim iam stirpis bonum quaeret, sed animalis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Haec et tu ita posuisti, et verba vestra sunt. Non enim iam stirpis bonum quaeret, sed animalis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Haec et tu ita posuisti, et verba vestra sunt. Non enim iam stirpis bonum quaeret, sed animalis.</span>
 </div>

I wanna text like in image below:-

i.stack.imgur.com/a5wQe.png

@ImranAli are you sure users with `1` rep can post images? – Roko C. Buljan Apr 22 '17 at 05:17 — Roko C. Buljan, Apr 22 '17 at 05:17

score -1 · Answer 1 · answered Apr 22 '17 at 05:20

Giving display:table to div and display:table-cell to span will do the trick .

div {
     

     text-align: center;
     border: 2px dashed #f69c55;
     display:table;
     height:300px;
   }
   span {
     display: table-cell;
     vertical-align: middle;
   
   }

<div>
   <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Haec et tu ita posuisti, et verba vestra sunt. Non enim iam stirpis bonum quaeret, sed animalis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Haec et tu ita posuisti, et verba vestra sunt. Non enim iam stirpis bonum quaeret, sed animalis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Haec et tu ita posuisti, et verba vestra sunt. Non enim iam stirpis bonum quaeret, sed animalis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Haec et tu ita posuisti, et verba vestra sunt. Non enim iam stirpis bonum quaeret, sed animalis.</span>
 </div>

How to align center text with CSS?

1 Answers1