CSS Unable to center text in Div - html

Question

Observe the following banner I have:
I want the "My Website" and "Your Go To Stop!" text to align both vertically and horizontally but I'm having difficulty getting that to happen.
JS Fiddle: http://jsfiddle.net/z63234p1/
masthead {
top: 32px;
padding-right: 0px;
background: #000;
padding-left: 0;
max-height: 100px;
border-bottom: none;
position: fixed;
z-index: 3;
width: 100%;
min-height: 73px;
color: #000;
display: block;
box-sizing: inherit;
}
.sidebar-toggle {
float: left;
border: 3px solid grey;
border-right: none;
height: 82px;
margin-right: 0;
width: 5%;
overflow: hidden;
padding: 0;
color: #000;
text-align: center;
}
button {
border-radius: 0;
transition: all 125ms ease-out;
cursor: pointer;
-webkit-appearance: button;
font-size: 100%;
margin: 0;
max-width: 100%;
vertical-align: baseline;
line-height: 1.5;
display: inline-block;
align-items: flex-start;
}
.screen-reader-text {
clip: rect(1px, 1px, 1px, 1px);
position: absolute !important;
height: 1px;
width: 1px;
overflow: hidden;
}
.sidebar-toggle:before {
content: "\f419";
height: 24px;
width: 16px;
color: inherit;
font-size: 16px;
line-height: 24px;
speak: none;
text-decoration: inherit;
vertical-align: top;
font-style: normal;
font-weight: normal
display: inline-block;
font-family: Genericons;
-webkit-font-smoothing: antialiased;
}
.site-branding {
width: 95%;
display: inline-flex;
margin-top: 0;
margin-bottom: 0;
float: left;
max-width: 100%;
}
#sitelogo {
display: inline-flex;
vertical-align: middle;
text-align: center;
}
.site-title {
border: 3px solid grey;
font-family: Impact, Charcoal, sans-serif;
font-weight: normal;
margin: 0 auto;
text-align: center;
line-height: normal;
min-width: 150px;
padding: 3px 8px;
font-size: 6vh;
height: 100%;
color: white;
float: left;
max-width: 100%;
}
h1 {
clear: both;
}
.site-description {
background: #fff500;
color: black;
display: block;
font-family: Impact, Charcoal, sans-serif;
margin: auto auto;
text-align: center;
height: 100%;
border-left: none;
border-top: 3px solid grey;
border-bottom: 3px solid grey;
border-right: 3px solid grey;
display: block;
padding: 0 16px;
font-size: 3vh;
line-height: 2.3;
float: left;
clear: none;
}
<header id="masthead" class="site-header" role="banner">
<button class="sidebar-toggle" aria-expanded="false" ><span class="screen-reader-text"><?php _e( 'Toggle Sidebar', 'boardwalk' ); ?></span></button>
<div class="site-branding">
<div id="sitelogo" class="clear">
<h1 class="site-title">My Website</h1>
<h2 class="site-description">Your Go To Stop</h2>
</div>
</div>
</header>
I'm aware that the image above doesn't look at all like the output of JS Fiddle and I know that what I'm getting on my test site is a fluke rather than the actual output.
Can someone help me get my CSS worked out so that all of the text is vertically aligned within their cells and horizontally aligned accross the logo?
Thank you in advance.

Answer 1

Use this Css:
<style type="text/css">
#masthead {
top: 32px;
padding-right: 0px;
background: #000;
padding-left: 0;
max-height: 100px;
border-bottom: none;
position: fixed;
z-index: 3;
width: 100%;
min-height: 73px;
color: #000;
display: block;
box-sizing: inherit;
}
.sidebar-toggle {
float: left;
border: 3px solid grey;
border-right: none;
height: 73px;
margin-right: 0;
width: 5%;
overflow: hidden;
padding: 0;
color: #000;
text-align: center;
}
button {
border-radius: 0;
transition: all 125ms ease-out;
cursor: pointer;
-webkit-appearance: button;
font-size: 100%;
margin: 0;
max-width: 100%;
vertical-align: baseline;
line-height: 1.5;
display: inline-block;
align-items: flex-start;
}
.screen-reader-text {
clip: rect(1px, 1px, 1px, 1px);
position: absolute !important;
height: 1px;
width: 1px;
overflow: hidden;
}
.sidebar-toggle:before {
content: "\f419";
height: 24px;
width: 16px;
color: inherit;
font-size: 16px;
line-height: 24px;
speak: none;
text-decoration: inherit;
vertical-align: top;
font-style: normal;
font-weight: normal
display: inline-block;
font-family: Genericons;
-webkit-font-smoothing: antialiased;
}
.site-branding {
width: 95%;
display: inline-flex;
margin-top: 0;
margin-bottom: 0;
float: left;
max-width: 100%;
}
#sitelogo {
display: inline-flex;
vertical-align: middle;
text-align: center;
}
.site-title {
border: 3px solid grey;
font-family: Impact, Charcoal, sans-serif;
font-weight: normal;
margin: 0 auto;
text-align: center;
line-height: normal;
min-width: 150px;
padding: 4px 8px;
font-size: 6vh;
height: 100%;
color: white;
float: left;
max-width: 100%;
}
h1 {
clear: both;
}
.site-description {
background: #fff500;
color: black;
font-family: Impact, Charcoal, sans-serif;
margin: auto auto;
text-align: center;
height: 100%;
border-left: none;
border-top: 3px solid grey;
border-bottom: 3px solid grey;
border-right: 3px solid grey;
display: block;
padding: 6px 16px;
font-size: 3vh;
line-height: 2.3;
float: left;
clear: none;
}
</style>

Answer 2

New css for #sitelogo:
display: inline-flex;
align-items: stretch;
New css for .site-title:
border: 3px solid grey;
font-family: Impact, Charcoal, sans-serif;
font-weight: normal;
min-width: 150px;
padding: 3px 8px;
font-size: 6vh;
color: white;
display: flex;
align-items: center;
justify-content: center;
New css for .site-description:
background: #fff500;
color: black;
font-family: Impact, Charcoal, sans-serif;
border-left: none;
border-top: 3px solid grey;
border-bottom: 3px solid grey;
border-right: 3px solid grey;
padding: 0 16px;
font-size: 3vh;
display: flex;
align-items: center;
justify-content: center;
Besides that I strongly suggest to not use vh for font-size.

Answer 3

I messed around with your line height of site-title as well as line height and height of site-description. Here's my result:
masthead {
top: 32px;
padding-right: 0px;
background: #000;
padding-left: 0;
max-height: 100px;
border-bottom: none;
position: fixed;
z-index: 3;
width: 100%;
min-height: 73px;
color: #000;
display: block;
box-sizing: inherit;
}
.sidebar-toggle {
float: left;
border: 3px solid grey;
border-right: none;
height: 82px;
margin-right: 0;
width: 5%;
overflow: hidden;
padding: 0;
color: #000;
text-align: center;
}
button {
border-radius: 0;
transition: all 125ms ease-out;
cursor: pointer;
-webkit-appearance: button;
font-size: 100%;
margin: 0;
max-width: 100%;
vertical-align: baseline;
line-height: 1.5;
display: inline-block;
align-items: flex-start;
}
.screen-reader-text {
clip: rect(1px, 1px, 1px, 1px);
position: absolute !important;
height: 1px;
width: 1px;
overflow: hidden;
}
.site-branding {
width: 95%;
display: inline-flex;
margin-top: 0;
margin-bottom: 0;
float: left;
max-width: 100%;
}
#sitelogo {
display: inline-flex;
vertical-align: middle;
text-align: center;
}
.site-title {
border: 3px solid grey;
font-family: Impact, Charcoal, sans-serif;
font-weight: normal;
margin: 0 auto;
text-align: center;
line-height: 58px;
min-width: 150px;
padding: 3px 8px;
font-size: 6vh;
height: 100%;
color: white;
float: left;
max-width: 100%;
}
h1 {
clear: both;
}
.site-description {
background: #fff500;
color: black;
display: block;
font-family: Impact, Charcoal, sans-serif;
margin: auto auto;
text-align: center;
height: 108%;
border-left: none;
border-top: 3px solid grey;
border-bottom: 3px solid grey;
border-right: 3px solid grey;
display: block;
padding: 0 16px;
font-size: 3vh;
line-height: 3.7;
float: left;
clear: none;
}
.sidebar-toggle:before {
content: "\f419";
height: 24px;
width: 16px;
color: inherit;
font-size: 16px;
line-height: 24px;
speak: none;
text-decoration: inherit;
vertical-align: top;
font-style: normal;
font-weight: normal display: inline-block;
font-family: Genericons;
-webkit-font-smoothing: antialiased;
}
Here's a diff compare to see the differences: http://www.mergely.com/vGQedH1p/ Is this what you were looking for?