Center specific text always - html

Question

I'm trying to create a result page for matches, however at the moment it looks weird when the VS is not centered at all time. My question is then how can i always center the VS?
http://jsfiddle.net/3adhoker/
.result-in-month:nth-child(even) {
background-color: #ebebeb;
}
.result-in-month {
background-color: #f3f3f3;
}
.result-in-month {
padding: 20px 30px;
font-size: 15px;
}
.gdlr-result-date {
display: inline-block;
width: 20%;
margin-right: 2%;
font-style: italic;
}
.gdlr-result-match-team-wrapper {
display: inline-block;
width: 56%;
text-align: center;
font-weight: bold;
text-transform: uppercase;
}
.gdlr-result-match-versus {
margin: 0px 2.5%;
padding: 0px 3px;
font-weight: normal;
}
.gdlr-result-match-team.gdlr-left {
margin-right: 2.5%;
text-align: right;
}
.gdlr-result-match-team.gdlr-right {
margin-left: 2.5%;
text-align: left;
}
<div class="result-in-month">
<div class="gdlr-result-date">25 Sun - 14:00</div>
<div class="gdlr-result-match-team-wrapper">
<span class="gdlr-result-match-team gdlr-left">
Bristol City
</span>
<span class="gdlr-result-match-versus">
VS
</span>
<span class="gdlr-result-match-team gdlr-right">
Real Soccer
</span>
</div>
<div class="clear"></div>
</div>
<div class="result-in-month">
<div class="gdlr-result-date">25 Sun - 14:00</div>
<div class="gdlr-result-match-team-wrapper">
<span class="gdlr-result-match-team gdlr-left">
Bristol City
</span>
<span class="gdlr-result-match-versus">
VS
</span>
<span class="gdlr-result-match-team gdlr-right">
Real MASTERCLASS
</span>
</div>
<div class="clear"></div>
</div>

Answer 1

You can use display: table and display: table-cell and set a fix width(check comments in css):
.result-in-month:nth-child(even) {
background-color: #ebebeb;
}
.result-in-month {
background-color: #f3f3f3;
display: table;/*add display table*/
width: 100%;
}
.result-in-month {
padding: 20px 30px;
font-size: 15px;
}
.gdlr-result-date {
display: table-cell;/*add display to table-cell*/
width: 20%;
margin-right: 2%;
font-style: italic;
}
.gdlr-result-match-team-wrapper {
display: table;/*add display table*/
text-align: center;
font-weight: bold;
text-transform: uppercase;
}
.gdlr-result-match-versus {
display: table-cell;/*add display to table-cell*/
margin: 0px 2.5%;
padding: 0px 3px;
font-weight: normal;
}
.gdlr-result-match-team.gdlr-left {
display: table-cell;/*add display to table-cell*/
margin-right: 2.5%;
text-align: right;
}
.gdlr-result-match-team.gdlr-right {
display: table-cell;
margin-left: 2.5%;
text-align: left;
width: 200px;/*set width to a fixed value for example 200px*/
}
<div class="result-in-month">
<div class="gdlr-result-date">25 Sun - 14:00</div>
<div class="gdlr-result-match-team-wrapper">
<span class="gdlr-result-match-team gdlr-left">
Bristol City
</span>
<span class="gdlr-result-match-versus">
VS
</span>
<span class="gdlr-result-match-team gdlr-right">
Real Soccer
</span>
</div>
<div class="clear"></div>
</div>
<div class="result-in-month">
<div class="gdlr-result-date">25 Sun - 14:00</div>
<div class="gdlr-result-match-team-wrapper">
<span class="gdlr-result-match-team gdlr-left">
Bristol City
</span>
<span class="gdlr-result-match-versus">
VS
</span>
<span class="gdlr-result-match-team gdlr-right">
Real MASTERCLASS
</span>
</div>
<div class="clear"></div>
</div>

Answer 2

Instead of using display: table-cell;, it's better to use real tables for this. For actual tabular data they are still the best solution.
.result-in-month tr:nth-child(even) {
background-color: #ebebeb;
}
.result-in-month{
border-spacing: 0px;
border-collapse: separate;
font-size: 15px;
width: 100%;
background-color: #f3f3f3;
}
.result-in-month td{
padding: 20px 30px;
}
.gdlr-result-date {
font-style: italic;
}
td.gdlr-result-match-versus {
padding: 0;
font-weight: normal;
}
.gdlr-result-match-team {
font-weight: bold;
text-transform: uppercase;
}
.gdlr-left {
text-align: right;
}
.gdlr-right {
text-align: left;
}
<table class="result-in-month">
<tr>
<td class="gdlr-result-date">25 Sun - 14:00</td>
<td class="gdlr-result-match-team gdlr-left"> Bristol City</td>
<td class="gdlr-result-match-versus">VS</td>
<td class="gdlr-result-match-team gdlr-right">Real Soccer</td>
</tr>
<tr>
<td class="gdlr-result-date">25 Sun - 14:00</td>
<td class="gdlr-result-match-team gdlr-left"> Bristol City</td>
<td class="gdlr-result-match-versus">VS</td>
<td class="gdlr-result-match-team gdlr-right">Real MASTERCLASS</td>
</tr>
</table>
JSFiddle

Answer 3

.result-in-month {
...
display: table-row;
}
.result-in-month > div {
display: table-cell;
padding: 10px 0;
}
.gdlr-result-match-team-wrapper > span {
display: table-cell;
padding: 0 10px;
}
Demo

Answer 4

My solution uses position:absolute
http://jsfiddle.net/3adhoker/4/
.result-in-month {
position: relative;
background-color: #f3f3f3;
}
.result-in-month {
padding: 20px 30px;
font-size: 15px;
}
.gdlr-result-date {
display: inline-block;
width: 20%;
margin-right: 2%;
font-style: italic;
}
.gdlr-result-match-team-wrapper {
display: inline-block;
width: 56%;
text-align: center;
font-weight: bold;
text-transform: uppercase;
position: absolute;
}
.gdlr-result-match-versus {
font-weight: normal;
position: absolute;
left: 0;
right: 0;
text-align: center;
}
.gdlr-result-match-team.gdlr-left {
text-align: right;
width: 50%;
position: absolute;
left: 0;
padding-right: 30px;
box-sizing: border-box;
}
.gdlr-result-match-team.gdlr-right {
text-align: left;
position: absolute;
padding-left: 30px;
width: 50%;
right: 0;
box-sizing: border-box;
}