我有一系列嵌套的 div，我试图让一个文本“TICKET NAME”溢出到另外两个上。
这是不良结果的图片：
这是我的代码：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Game</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<div id="game_head">
<div id="timer">
</div>
<div id="flags">
<div id="best_of">
</div>
</div>
<div id="team_1">
<span class="team_name">Team 1</span>
</div>
<div id="ticket">
<span class="versus">VS</span>
<span class="ticket_name">TICKET NAME</span>
</div>
<div id="team_2">
<span class="team_name">Team 2</span>
</div>
</div>
<div id="game_body">
</div>
<body>
</body>
</html>
我的 CSS 看起来像这样：
#game_head {
height: 62px;
width: 555px;
background-color: #CCC;
}
#timer {
height: 100%;
width: 26%;
background-color:#111;
float:left;
}
#flags {
height: 100%;
width: 4%;
background-color:#333;
float:left;
}
#best_of{
height:33%;
background-color:#F00;
}
#team_1 {
height: 100%;
width: 31.5%;
background-color:#999;
float:left;
text-align:center;
display:table;
}
#team_2 {
height: 100%;
width: 31.5%;
background-color:#999;
float:left;
text-align:center;
display:table;
}
#ticket {
height: 100%;
width: 7%;
background-color:#333;
float:left;
overflow:visible;
}
span.ticket_name{
color:#FFF;
}
span.team_name{
display: table-cell;
vertical-align: middle;
}
span.versus{
color:#F00;
}
我将如何使“TICKET NAME”文本居中在“ticket”div 中，但溢出到“team_1”和“team_2”div 中？
提前致谢！