0

I want to centre some text within a DIV vertically. However, I'm using Bootstrap and none of the conventional methods seem to work because it's within a column. Here's what I've got so far:

HTML:

<div class="col-sm-6">
    <div class="innercontent">
        <h2 class="text-center">Last Hope: The Halo Machinima</h2>
    </div>
</div>

CSS:

.innercontent {
    display:block
    margin:auto 0;
}

The col-sm-6 doesn't have a set height and nor does the inner because they will vary on multiple uses. The CSS is what I assumed would work but doesn't.
The effect I kinda want you can see on the live dev site here: http://dev.infiniteideamedia.com/machinima/lasthope.php but it's not perfectly centred using a less than adequate method.

Nisse Engström
  • 4,738
  • 23
  • 27
  • 42
Tom Carter
  • 155
  • 3
  • 13

2 Answers2

0

This is how you center anything inside div which has dynamic height

.col-sm-6 {
  border: 1px solid;
  min-height: 300px;
  position: relative;
  max-width: 600px;
}

h2 {
  margin: 0;
  position: absolute;
  top: 50%;
  transform: translate(0%,-50%);
  width: 100%;
  text-align: center;
}
<div class="col-sm-6">
     <div class="innercontent">
         <h2 class="text-center">Last Hope: The Halo Machinima</h2>
     </div>
</div>
Siddharth Thevaril
  • 3,722
  • 3
  • 35
  • 71
-1

David Walsh has written a good article on centering. Have a look at it. Run below snippet

.innercontent {
 height:400px;
 background:#777; 
padding-top:20%;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="col-sm-6">
  <div class="innercontent">
    <h2 class="text-center">Last Hope: The Halo Machinima</h2>
  </div>
</div>
Sachin Kanungo
  • 1,054
  • 9
  • 17