Text Vertical Alignment on DIV

Question

I need to align text inside those text inside the vertically middle in all the screen resolutions.

Can any one suggest please?

Currently i have used padding and min-height property. But the alignment differs on each resolutions — Raj, Jul 14 '17 at 11:25
Here you go: https://jsfiddle.net/kr9cjc3L/2/ I took the liberty to clean up your code a little as well :) — Alexander Johansen, Jul 14 '17 at 11:38
@AlexanderJohansen. You are free to edit. ;) I got another method from you to implement. Thanks to you too :) — Raj, Jul 14 '17 at 11:44

score 3 · Answer 1 · answered Jul 14 '17 at 11:16

3

You can use flexbox to align items.

  display: flex;
  align-items: center;
  justify-content: center;

Full example here: codepen

answered Jul 14 '17 at 11:16

hairmot

2,975
1
13
26

Santhoshkumar · Accepted Answer · 2017-07-14T11:31:36.233

Try following code

.textBox{display: flex;align-items: center;justify-content: center;}
.cont-bx1{background-color:#9f2f1f; color:#ffffff; text-align:center;  min-height:200px; font-weight:bold; border: 1px solid #ffffff;}
.cont-bx2{background-color:#ef9030; color:#ffffff; text-align:center; min-height:200px; font-weight:bold; border: 1px solid #ffffff;}
.cont-bx3{background-color:#df6221; color:#ffffff; text-align:center; min-height:200px; font-weight:bold; border: 1px solid #ffffff;}
.cont-bx4{background-color:#df6221;  color:#ffffff; text-aligncenter;  min-height:200px; font-weight:bold; border: 1px solid #ffffff; }
.cont-bx5{background-color:#9f2f1f; color:#ffffff; text-align:center; min-height:200px; font-weight:bold; border: 1px solid #ffffff;}
.cont-bx6{background-color:#9f2f1f; color:#ffffff; text-align:center; min-height:200px; font-weight:bold; border: 1px solid #ffffff;}
.cont-bx7{background-color:#ef9030; color:#ffffff; text-align:center; min-height:200px; font-weight:bold; border: 1px solid #ffffff;}
.cont-bx8{background-color:#df6221; color:#ffffff; text-align:center; min-height:200px; font-weight:bold; border: 1px solid #ffffff;}

<div class="col-lg-12">
<div class="col-lg-4 cont-bx1 textBox">Lorem ipsum dolor sit amet, consectetur adipiscing elit</div>
<div class="col-lg-4 cont-bx2 textBox">Lorem ipsum dolor sit amet, consectetur</div>
<div class="col-lg-4 cont-bx3 textBox">Lorem ipsum dolor sit amet, consectetur adipiscing</div>
</div>
<div class="col-lg-12">
<div class="col-lg-6 cont-bx4 textBox">Lorem ipsum dolor sit amet, consectetur adipiscing elit</div>
<div class="col-lg-6 cont-bx5 textBox">Lorem ipsum dolor sit amet, consectetur adipiscing</div>
</div>
<div class="col-lg-12">
<div class="col-lg-4 cont-bx6 textBox">Lorem ipsum dolor sit amet, consectetur adipiscing elit</div>
<div class="col-lg-4 cont-bx7 textBox">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do</div>
<div class="col-lg-4 cont-bx8 textBox">Lorem ipsum dolor sit amet</div>
</div>

Text Vertical Alignment on DIV

2 Answers2