The text won't go vertically centered?

Question

I've been trying to get the text to go vertically centered like this https://i.stack.imgur.com/UreMt.png but it doesn't seem to want to align.

@import url('http://getbootstrap.com/dist/css/bootstrap.min.css');
h4 {
  margin-top: 25px;
}

.row {
  margin-bottom: 20px;
}

.row .row {
  margin-top: 10px;
  margin-bottom: 0;
}

[class*="col-"] {
  padding-top: 15px;
  padding-bottom: 15px;
  background-color: #eee;
  background-color: rgba(86, 61, 124, .15);
  border: 1px solid #ddd;
  border: 1px solid rgba(86, 61, 124, .2);
  height: 250px;
}

hr {
  margin-top: 40px;
  margin-bottom: 40px;
}

.innertext {
  display: inline-block;
  width: 90%
}

.label {
  position: absolute;
  top: 50%;
  margin-top: -10px;
}

<div class="container">
  <div class="row">
    <div class="col-md-4">
      <div class="innertext">Text Test Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text</div>
    </div>
  </div>
</div>

Jsfiddle: http://jsfiddle.net/r0gsewtd/1/

duplicate of http://stackoverflow.com/questions/8865458/how-to-align-text-vertically-center-in-div-with-css — mybirthname, Sep 30 '14 at 23:27

score 2 · Accepted Answer · answered Sep 30 '14 at 23:16

2

Here you go: Fiddle

.innertext {
  position: relative;
  transform: translateY(-50%);
  top: 50%;
}

answered Sep 30 '14 at 23:16

fzzle

1,466
5
23
28

score 0 · Answer 2 · edited May 23 '17 at 12:09

[class*="col-"] {
    padding-top: 15px;
    padding-bottom: 15px;
    background-color: #eee;
    background-color: rgba(86, 61, 124, .15);
    border: 1px solid #ddd;
    border: 1px solid rgba(86, 61, 124, .2);
    height: 250px;
    display: table-cell;
    vertical-align: middle;
}

Add last 2 lines to your [class*="col-"]

display: table-cell;
vertical-align: middle;

Also you can check this : How do I vertically center text with CSS?

score 0 · Answer 3 · answered Oct 01 '14 at 04:06

You can vertically center the text by applying table display property add

 display:table;

to parent class, div-col-md-4 then add

 display:table-cell;
 vertical-align:middle;

to .innertext

demo

Then the code becomes

 .col-md-4 {
padding-top: 15px;
padding-bottom: 15px;
background-color: #eee;
background-color: rgba(86, 61, 124, .15);
border: 1px solid #ddd;
border: 1px solid rgba(86, 61, 124, .2);
height: 250px;
display:table;
}

.innertext {
display:inline-block;
width:90%;
    display:table-cell;
vertical-align:middle;

}

The text won't go vertically centered?

3 Answers3