中心特定文本始終

Question

我正在嘗試為匹配創建一個結果頁面，但是當VS在任何時候都沒有居中時，它看起來很奇怪。 我的問題是，我怎么能總是把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

你可以使用display: table和display: table-cell並設置一個固定寬度（檢查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

而不是使用display: table-cell; ，最好使用真實的表格。 對於實際的表格數據，它們仍然是最佳解決方案。

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

演示

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