Question

我试图创建一个匹配div，显示匹配信息。然而，它们应该都是不同的尺寸，似乎并不想要正确居中。我希望所有这些文本都在div的中间居中？怎么办呢？

＆＃13;

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

＆＃13;

				<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>

＆＃13;

Answer 1

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

我可能会改变你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;
}

Answer 3

你的意思是这样吗？

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

因为您使用的是元素，所以您只在nav中声明了字体和大小，而不是其他元素

将跟随添加到其他元素，它将正常工作。看看小提琴

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

垂直居中的文字，大小不同

3 个答案: