将文本和图像垂直居中的问题

Question

我已经在这里和网上阅读了很多关于如何使文本和图像垂直居中的页面，但我似乎无法管理它。很明显，我有些东西是我想念的，但是什么呢？

＆＃13;

＆＃13;

tr:nth-child(odd) {
  background-color: #FFF;
}

tr:nth-child(even) {
  background-color: #FFF4E3;
}

#serviceList {
  background-color: #FFDEA5;
  border: 2px double white;
  margin-bottom: 10px;
}

.serviceContentMode {
  float: left;
  margin: 2px;
  width: 70px;
}

.serviceContentNum {
  float: left;
  margin: 2px;
  font-size: 20pt;
  width: 75px;
}

.serviceContentOp,
.serviceContentDesc {
  font-size: 12pt;
  line-height: 150%;
}

.serviceContentOp {
  font-weight: bold;
}

.serviceContentDesc {
  font-style: italic;
}

＆＃13;

<div id="serviceList">
  <h1>Services</h1>
  <h3>The following services operate in Southend-on-sea:</h3>
  <table width="100%" border="0">
    <tbody>
      <tr>
        <td>
          <div class="serviceContentMode"><img alt="Wheelchair-accessible bus" src="http://www.travelinesoutheast.org.uk/se/images/means/WheelchairBus.gif" /></div>
          <div class="serviceContentNum"><span style="vertical-align:middle;">1</div></span>
            <div class="serviceContentOp">Arriva (in Herts and Essex)</div>
            <div class="serviceContentDesc">Southend - Hadleigh - South Benfleet - Thundersley - Rayleigh</div>
        </td>
      </tr>
      <tr>
        <td>
          <div class="serviceContentMode"><img alt="Wheelchair-accessible bus" src="http://www.travelinesoutheast.org.uk/se/images/means/WheelchairBus.gif" /></div>
          <div class="serviceContentNum"><span style="vertical-align:middle;">28</div></span>
            <div class="serviceContentOp">First in Essex</div>
            <div class="serviceContentDesc">Southend - Hadleigh - Thundersley - Benfleet - Pitsea - Basildon</div>
        </td>
      </tr>
      <tr>
        <td>
          <div class="serviceContentMode"><img alt="Wheelchair-accessible coach" src="http://www.travelinesoutheast.org.uk/se/images/means/Coach.gif">
          </div>
          <div class="serviceContentNum"><span style="vertical-align:middle;">X5</span></div>
          <div class="serviceContentOp">First in Essex</div>
          <div class="serviceContentDesc">Southend - Southend Airport - Rayleigh - Chelmsford - Barnston - Stansted Airport</div>
        </td>
      </tr>
    </tbody>
  </table>
  </div>

＆＃13;

＆＃13;

＆＃13;

我知道vertical-align: middle目前仅应用于HTML文件中服务号码的<span>，而不是CSS，但我尝试了各种不同的组合一切都无济于事。

那么我错过了什么？

由于

Answer 1

我不明白为什么你在td里面使用了div标签。

你必须检查红色标签，因为它们严重关闭

您在span标记

之前关闭第一个div

Answer 2

非常感谢@Django，答案是摆脱表格，只使用带有display: inline-block元素的DIV。修订后的HTML / CSS如下所示。

#serviceList {
    font-family:Arial, Verdana, Geneva, Helvetica, sans-serif;
    font-size:0.75em;
    color:#000;
    background-color: #FFDEA5;
    border: 2px double white;
    margin-bottom: 10px;
    }

.service {
    display: block;
    width: 100%;
    margin-bottom: 2px;
    }

.service:nth-child(odd) {
    background-color: #FFF;
}

.service:nth-child(even) {
    background-color: #FFF4E3;
    }

.serviceText, .serviceMode, .serviceNum {
    display: inline-block;
    vertical-align: middle;
    }

.serviceMode {
    margin: 2px;
    width: 70px;
    }

.serviceNum {
    margin:2px;
    font-size:20pt;
    width:75px;
    }

.serviceOp, .serviceDesc { 
    font-size:12pt; 
    line-height:150%; 
    }

.serviceOp {
    font-weight: bold;
    }

.serviceDesc {
    font-style: italic; 
    }

<div id="serviceList">
  <h1>Services</h1>
  <h3>The following services operate in Southend-on-sea:</h3>
  <div class="service">
    <div class="serviceMode"><img alt="Wheelchair-accessible bus" src="http://www.travelinesoutheast.org.uk/se/images/means/WheelchairBus.gif"/></div>
    <div class="serviceNum">1</div>
    <div class="serviceText">
      <div class="serviceOp">Arriva (in Herts and Essex)</div>
      <div class="serviceDesc">Southend - Hadleigh - South Benfleet - Thundersley - Rayleigh</div>
    </div>
  </div>
  <div class="service">
    <div class="serviceMode"><img alt="Wheelchair-accessible bus" src="http://www.travelinesoutheast.org.uk/se/images/means/WheelchairBus.gif"/></div>
    <div class="serviceNum">28</div>
    <div class="serviceText">
      <div class="serviceOp">First in Essex</div>
      <div class="serviceDesc">Southend - Hadleigh - Thundersley - Benfleet - Pitsea - Basildon</div>
    </div>
  </div>
  <div class="service">
    <div class="serviceMode"><img alt="Wheelchair-accessible coach" src="http://www.travelinesoutheast.org.uk/se/images/means/Coach.gif"></div>
    <div class="serviceNum">X5</div>
    <div class="serviceText">
      <div class="serviceOp">First in Essex</div>
      <div class="serviceDesc">Southend - Rayleigh - Chelmsford - Barnston - Stansted Airport</div>
    </div>
  </div>
</div>