Geek Answers Handbook

Center-specific text always

I am trying to create a results page for matches, however at the moment it looks weird when VS is not centered at all times. My question is, 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>
Run codeHide result
+4
source share
4 answers

You can use display: tableand display: table-celland set the width of the fix (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>
Run codeHide result
+4
source

Instead of using display: table-cell;it, it's better to use real tables. 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>
Run codeHide result

Jsfiddle

+2
source 
.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;
}

0

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

More articles:


All Articles