html - 不同大小的垂直居中文本

Question

我正在尝试创建一个显示匹配信息的匹配 div。然而，它们的尺寸应该都不同，而且它似乎不想正确居中。我想让所有这些文本都居中在 div 的中间吗？如何做到这一点？

	.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

您可以让内部 div 表现得像表格单元格，然后垂直对齐它们。

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>