0

I'm trying to vertically align my text/buttons in the middle. However, I have used vertical-align: middle; and I have nested all the text/buttons with the div and I have no idea why it's not working.

I have checked out the answer to this post on the stack forums and I followed the answer and still couldn't manage to do it. 

html,
body {
    width: 100%;
    height: 100%;
}

body {
    font-family: Helvetica;
}

.text-vertical-center {
    text-align: center;
    vertical-align: middle;
    color: green;
}

.text-vertical-center h1 {
    margin: 0;
    padding: 0;
    font-size: 4.5em;
    font-weight: 700;
    color: green;
}

/* Custom Button Styles */

.btn-dark {
    border-radius: 0;
    color: #fff;
    background-color: rgba(0,0,0,0.4);
}

.btn-dark:hover,
.btn-dark:focus,
.btn-dark:active {
    color: #fff;
    background-color: rgba(0,0,0,0.7);
}

hr.small {
    max-width: 100px;
}

/* Side Menu */


.header {
    display: table;
    position: relative;
    width: 100%;
    height: 100%;
    background: url(../img/bg.jpg) no-repeat center center scroll;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<header id="top" class="header">
        <div class="text-vertical-center">
            <h1 =class"main1">Start Bootstrap</h1>
            <h3 =class"main2">Free Bootstrap Themes &amp; Templates</h3>
            <br>
            <a href="#about" class="btn btn-dark btn-lg">Find Out More</a>
            <a href="#about" class="btn btn-dark btn-lg">Find Out More</a>
            <a href="#about" class="btn btn-dark btn-lg">Find Out More</a>
        </div>
    </header>
Alireza
  • 2,319
  • 2
  • 23
  • 35
Jon Bridge
  • 329
  • 1
  • 2
  • 12

2 Answers2

2

In the example given, you need to add display: table-cell to .text-vertical-center.

slynagh
  • 601
  • 4
  • 16
0

In order to make it work you need to have a new changes it your code. if you want to center it, you need it to be display: inline-block;, and have a sibling to vertical align to. The best approach I can think of is the following:

html,
body {
    width: 100%;
    height: 100%;
}

body {
    font-family: Helvetica;
}

.text-vertical-center {
    text-align: center;
    vertical-align: middle;
    color: green;
    display: inline-block;
}

.text-vertical-center h1 {
    margin: 0;
    padding: 0;
    font-size: 4.5em;
    font-weight: 700;
    color: green;
}

/* Custom Button Styles */

.btn-dark {
    border-radius: 0;
    color: #fff;
    background-color: rgba(0,0,0,0.4);
}

.btn-dark:hover,
.btn-dark:focus,
.btn-dark:active {
    color: #fff;
    background-color: rgba(0,0,0,0.7);
}

hr.small {
    max-width: 100px;
}

/* Side Menu */


.header {
    display: table;
    position: relative;
    width: 100%;
    height: 100%;
    background: url(../img/bg.jpg) no-repeat center center scroll;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
}

.header:before {
    content: "";
    vertical-align: middle;
    height: 100%;
    display: inline-block;
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<header id="top" class="header">
        <div class="text-vertical-center">
            <h1 =class"main1">Start Bootstrap</h1>
            <h3 =class"main2">Free Bootstrap Themes &amp; Templates</h3>
            <br>
            <a href="#about" class="btn btn-dark btn-lg">Find Out More</a>
            <a href="#about" class="btn btn-dark btn-lg">Find Out More</a>
            <a href="#about" class="btn btn-dark btn-lg">Find Out More</a>
        </div>
    </header>
Itay Ganor
  • 3,965
  • 3
  • 25
  • 40