html - 使用 CSS 旋转文本的文本对齐方式

Question

我正在尝试对齐范围内的所有文本(垂直和水平)以使其统一。但是由于某些原因，第三个(绿色)team 列在 col div 中的位置与 team div 的其余部分不同请参阅使用 Firebug 等。

我该如何解决这个问题，它与 div 已旋转这一事实有关还是其他原因？

JSFiddle:http://jsfiddle.net/n0L7768c/

.counter {
  background-color: #653d24;
  bottom: 0;
  font-family: "Patrick Hand", arial, sans-serif;
  padding: 60px 15px 0 15px;
  position: fixed;
  right: 100px;
  z-index: 99999999;
  bottom: -0;
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.5);
  -moz-box-shadow: 0 0 30px rgba(0, 0, 0, 0.5);
  -webkit-box-shadow: 0 0 30px rgba(0, 0, 0, 0.5);
}
.counter h3 {
  background-image: url("/wp-content/themes/springfield/images/title-bg.png");
  background-size: 100% auto;
  font-size: 15px;
  height: 88px;
  left: 0;
  line-height: 88px;
  margin: 0 auto;
  position: absolute;
  right: 0;
  text-align: center;
  top: -41px;
  width: 305px;
  z-index: 10;
}
.counter .col {
  width: 75px;
  height: 172px;
  text-align: center;
  color: #fff;
  margin: 0 15px;
  position: relative;
  float: left;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}
.counter .team {
  font-size: 20px;
  left: -22px;
  position: absolute;
  top: 28px;
  margin-top: 5px;
  transform: rotate(-270deg);
  -moz-transform: rotate(-270deg);
  -webkit-transform: rotate(-270deg);
  -ms-transform: rotate(-270deg);
  -o-transform: rotate(-270deg);
  transform-origin: 49% 52%;
  -moz-transform-origin: 49% 52%;
  -webkit-transform-origin: 49% 52%;
  -ms-transform-origin: 49% 52%;
  -o-transform-origin: 49% 52%;
  width: 119px;
}
.counter .score {
  bottom: 0;
  font-size: 40px;
  position: absolute;
  width: 100%;
}
span.blue {
  color: #3597d0;
}
span.orange {
  color: #ff9900;
}
span.green {
  color: #99cc00;
}
span.red {
  color: #ff0000;
}
.counter .col.blue {
  background-color: #3597d0;
}
.counter .col.orange {
  background-color: #ff9900;
}
.counter .col.green {
  background-color: #99cc00;
}
.counter .col.red {
  background-color: #ff0000;
}
.team > span {
  display: inline-block;
  vertical-align: middle;
}
.show {
  bottom: 0;
  transition: bottom 2s;
  -moz-transition: bottom 2s;
  -webkit-transition: bottom 2s;
  -ms-transition: bottom 2s;
  -o-transition: bottom 2s;
}

<div class="counter hidden-mobile">
  <div class="scores">
    <div class="col blue">
      <div class="team">
        <span>Miners (2nd)</span>
      </div>
      <!-- .team -->
      <div class="score">341</div>
      <!-- .score -->
    </div>
    <!-- .col -->
    <div class="col orange">
      <div class="team">
        <span>Brewers (1st)</span>
      </div>
      <!-- .team -->
      <div class="score">
        456
      </div>
      <!-- .score -->
    </div>
    <!-- .col -->
    <div class="col green">
      <div class="team">
        <span>Foresters (3rd)</span>
      </div>
      <!-- .team -->
      <div class="score">
        259
      </div>
      <!-- .score -->
    </div>
    <!-- .col -->
    <div class="col red">
      <div class="team">
        <span>Potters (4th)</span>
      </div>
      <!-- .team -->
      <div class="score">
        69
      </div>
      <!-- .score -->
    </div>
    <!-- .col -->
  </div>
  <!-- .scores -->
</div>
<!-- .counter -->

Answer 1

只需将 white-space: nowrap; 添加到 .team > span 中，如下所示:

.team > span {
  display: inline-block;
  vertical-align: middle;
  white-space: nowrap;
}

.counter {
  background-color: #653d24;
  bottom: 0;
  font-family: "Patrick Hand", arial, sans-serif;
  padding: 60px 15px 0 15px;
  position: fixed;
  right: 100px;
  z-index: 99999999;
  bottom: -0;
  -webkit-box-shadow: 0 0 30px rgba(0, 0, 0, 0.5);
     -moz-box-shadow: 0 0 30px rgba(0, 0, 0, 0.5);
          box-shadow: 0 0 30px rgba(0, 0, 0, 0.5);
}
.counter h3 {
  background-image: url("/wp-content/themes/springfield/images/title-bg.png");
  background-size: 100% auto;
  font-size: 15px;
  height: 88px;
  left: 0;
  right: 0;
  top: -41px;
  width: 305px;
  line-height: 88px;
  margin: 0 auto;
  position: absolute;
  text-align: center;
  z-index: 10;
}
.counter .col {
  width: 75px;
  height: 172px;
  text-align: center;
  color: #fff;
  margin: 0 15px;
  position: relative;
  float: left;
  -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
     -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
          box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}
.counter .team {
  font-size: 20px;
  left: -22px;
  position: absolute;
  top: 28px;
  margin-top: 5px;
  width: 119px;
  -webkit-transform: rotate(-270deg);
     -moz-transform: rotate(-270deg);
      -ms-transform: rotate(-270deg);
       -o-transform: rotate(-270deg);
          transform: rotate(-270deg);
  -webkit-transform-origin: 49% 52%;      
     -moz-transform-origin: 49% 52%;
      -ms-transform-origin: 49% 52%;
       -o-transform-origin: 49% 52%;
          transform-origin: 49% 52%;
}
.counter .score {
  bottom: 0;
  font-size: 40px;
  position: absolute;
  width: 100%;
}

span.blue   { color: #3597d0; }
span.orange { color: #ff9900; }
span.green  { color: #99cc00; }
span.red    { color: #ff0000; }

.counter .col.blue   { background-color: #3597d0; }
.counter .col.orange { background-color: #ff9900; }
.counter .col.green  { background-color: #99cc00; }
.counter .col.red    { background-color: #ff0000; }

.team > span {
  display: inline-block;
  vertical-align: middle;
  white-space: nowrap;
}
.show {
  bottom: 0;
  -webkit-transition: bottom 2s;
     -moz-transition: bottom 2s;
      -ms-transition: bottom 2s;
       -o-transition: bottom 2s;
          transition: bottom 2s;
}

<div class="counter hidden-mobile">
  <div class="scores">
    <div class="col blue">
      <div class="team">
        <span>Miners (2nd)</span>
      </div>
      <!-- .team -->
      <div class="score">341</div>
      <!-- .score -->
    </div>
    <!-- .col -->
    <div class="col orange">
      <div class="team">
        <span>Brewers (1st)</span>
      </div>
      <!-- .team -->
      <div class="score">
        456
      </div>
      <!-- .score -->
    </div>
    <!-- .col -->
    <div class="col green">
      <div class="team">
        <span>Foresters (3rd)</span>
      </div>
      <!-- .team -->
      <div class="score">
        259
      </div>
      <!-- .score -->
    </div>
    <!-- .col -->
    <div class="col red">
      <div class="team">
        <span>Potters (4th)</span>
      </div>
      <!-- .team -->
      <div class="score">
        69
      </div>
      <!-- .score -->
    </div>
    <!-- .col -->
  </div>
  <!-- .scores -->
</div>
<!-- .counter -->