текст в вертикальном центре с разностными размерами

Question

Я пытаюсь создать совпадение соответствия, которое отображает информацию соответствия. Однако все они должны быть разных размеров, и похоже, что он не хочет центрироваться должным образом. Я хочу, чтобы весь этот текст был центрирован в середине div? Как это может быть сделано?

\t .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; 
 
}

\t \t \t \t <div class="result-in-month"> 
 
\t \t \t 
 
\t \t <div class="result-date"> 
 
\t \t SLUT \t \t 
 
\t \t 
 
\t \t </div> 
 
\t \t <div class="result-match-team-wrapper"> 
 
\t \t <span class="result-match-team left"> 
 
\t \t TEAM 3 
 

 
\t \t </span> 
 
\t \t <span class="result-match-versus"> 
 
\t \t VS 
 
\t \t </span> 
 
\t \t <span class="result-match-team right"> 
 
\t \t TEAM 1 
 

 
\t \t </span> 
 
\t \t </div> 
 
\t \t <div class="result-stream"> 
 

 
\t \t \t <span class="result-match-score" >2</span><span class="result-match-separator">-</span><span class="result-match-score">1</span> 
 
\t \t 
 
\t \t </div> 
 
\t \t <div class="clear"></div> 
 
\t \t </div>

Answer 1

Вы могли бы позволить внутренние дивы вести себя, как ячейки таблицы, а затем вертикальное выравнивание их.

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

ли вы имеете в виду что-то вроде этого?

https://jsfiddle.net/wgrLfxg3/4/

Поскольку вы используете элементы, которые вы только декларировали шрифт и размер в нав, но не остальные элементы

добавить последующий к другим элементам, и он будет работать нормально. Посмотрите скрипку

font-size: 18px; 
font-weight: 400; 
font-family: Oswald, Impact, sans-serif !important; 

Answer 3

я бы, вероятно, изменить структуру вашего HTML, но это должно видеть Вас на правильном пути, с тем, что у вас есть.

Updated fiddle

Вы можете использовать абсолютное позиционирование на дочерние элементы вашего result-in-month класса как так

.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; 
}