Question

我正在尝试为匹配创建结果页面，但是当VS在任何时候都没有居中时，它看起来很奇怪。我的问题是，我怎么能总是把VS放在中心？

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

您可以使用display: table和display: table-cell并设置修正宽度（查看css中的评论）：

＆＃13;

.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*/
}

＆＃13;

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

＆＃13;

Answer 2

不是使用display: table-cell;，而是使用真实表格更好。对于实际的表格数据，它们仍然是最佳解决方案。

＆＃13;

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

＆＃13;

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

＆＃13;

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

我的解决方案使用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;
}

中心特定文本始终

4 个答案: