-1

I am trying to vertically align my in my header to be in the middle. I looked up the solutions to this question being asked and none of them work. Does vertical-align: not work for trying to vertically align an inline-element within a div such as a header?

I tried creating a box model using 100% width and 100% height, or also the exact px of my div element that my h1 is in. It just does not respond and stays on the top.

I know this question has been asked many times, however, I just cannot get it to work. Thank you for your time!

<header class="main-header">
    <div id="header-title-box">
         <h1 class="header-font"> This Is My Lab Zoe! </h1>
    </div>
</header>

.main-header {
    width: 100%;
    height: 150px;
    background:#3d594b;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

#header-title-box {
    display: inline-block;
    vertical-align: middle;
    border: none;
    width: 100%;
    height: 150px;
    margin: 0;
}

h1.header-font {
    height: 150px;
    vertical-align: middle;
    font-size: 40px;
    color: white;
    margin: 0;
    text-align: center;
}
William Weisz
  • 5
  • 3

1 Answers1

0

You can achieve vertical aligining by providing display as table-cell.

#header-title-box{

`display: table-cell;`
`vertical-align: middle;`
`border: none;`
`width: 100%;`
`height: 150px;`
`margin: 0;`

}

mohit kaushik
  • 363
  • 2
  • 13