vertically center text with difference sizes - html

Question

I'm trying to create a match div, which show match information. However they should all be different sizes and it does not seem like it wants to center properly. I want all these text to be centered in the middle of the div? how can this be done?
.saperator {
margin-right: 17px;
vertical-align: text-bottom;
color: #787878;
}
.result-in-month {
padding: 25px 20px;
background: #efefef;
margin-bottom: 10px;
border-radius: 4px;
border: none;
transition: all 0.45s ease-in-out 0s;
position: relative;
}
.result-in-month:hover {
background: #FFF;
box-shadow: 0px 0px 3px 1px #e5e5e5;
}
.result-in-month {
padding: 20px 30px;
font-size: 15px;
}
.result-date {
display: inline-block;
width: 12%;
margin-right: 2%;
font-size: 12px;
font-weight: 400;
text-transform: uppercase;
line-height: 40px;
}
.result-stream {
display: inline-block;
width: 12%;
text-transform: uppercase;
line-height: 40px;
text-align: right;
color: #212121;
font-size: 36px;
}
.result-stream a:hover {
text-decoration: none;
}
.result-match-team-wrapper {
display: inline-block;
width: 72%;
text-align: center;
text-transform: uppercase;
line-height: 40px;
font-weight: normal;
font-size: 18px;
}
.result-match-versus {
padding: 0px 3px;
font-weight: normal;
color: #999999;
}
.result-match-team.left {
margin-right: 2.5%;
text-align: right;
}
.result-match-team.right {
margin-left: 2.5%;
text-align: left;
}
.result-match-team {
display: inline-block;
width: 40%;
}
.result-match-separator {
margin: 0px 2.5%;
}
#nav {
margin-left:0px !important;
}
#nav li {
display: inline-block;
padding: 4px 11px;
background-color: #fff;
margin-right: 6px;
}
#nav li a {
color: #000;
text-decoration: none;
text-transform: uppercase;
font-size: 18px;
font-weight: 400;
font-family: Oswald, Impact, sans-serif !important;
}
#nav li.active {
background-color: #000;
}
#nav li.active a {
color: #fff;
}
<div class="result-in-month">
<div class="result-date">
SLUT
</div>
<div class="result-match-team-wrapper">
<span class="result-match-team left">
TEAM 3
</span>
<span class="result-match-versus">
VS
</span>
<span class="result-match-team right">
TEAM 1
</span>
</div>
<div class="result-stream">
<span class="result-match-score" >2</span><span class="result-match-separator">-</span><span class="result-match-score">1</span>
</div>
<div class="clear"></div>
</div>

Answer 1

You could let the inner divs behave like table cells and then vertical align them.
div {
border: 1px solid grey;
}
.match-header {
display: table;
width: 100%;
height: 300px;
}
.v-center {
vertical-align: middle;
display: table-cell;
}
.player-a {
font-size: 3em;
text-align: center;
}
.player-b {
font-size: 6em;
text-align: center;
}
.score {
font-size: 1em;
text-align: center;
}
<div class="match-header">
<div class="player-a v-center">
Ann
</div>
<div class="score v-center">
5 vs 6
</div>
<div class="player-b v-center">
Bob
</div>
</div>

Answer 2

I would probably change the structure of your HTML but this should see you on the right track with what you've got.
Updated fiddle
You can use absolute positioning on the children elements of your result-in-month class like so
.result-date{
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 12%;
margin-right: 2%;
font-size: 12px;
font-weight: 400;
text-transform: uppercase;
}
.result-match-team-wrapper {
position: absolute;
top: 50%;
transform: translateY(-50%);
display: inline-block;
width: 94%;
text-align: center;
text-transform: uppercase;
line-height: 40px;
font-weight: normal;
font-size: 18px;
}
.result-stream{
position: absolute;
top: 50%;
right: 5%;
transform: translateY(-50%);
display: inline-block;
width: 12%;
text-transform: uppercase;
line-height: 40px;
text-align: right;
color: #212121;
font-size: 36px;
}

Answer 3

Do you mean something like this ?
https://jsfiddle.net/wgrLfxg3/4/
Because you are using elements you only declared the font and size in nav but not the rest of elements
add the follow to the other elements and it will work fine. Take a look to the fiddle
font-size: 18px;
font-weight: 400;
font-family: Oswald, Impact, sans-serif !important;