使文本和圖像垂直居中的問題

-2

我已經在這裏和在線閱讀了大量有關如何讓文本和圖像垂直居中的頁面，但我似乎無法管理它。顯然有一些我失蹤了，但什麼？使文本和圖像垂直居中的問題

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

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

我知道vertical-align: middle目前只在HTML文件應用於<span>的服務號碼，而不是在CSS，但我已經試過各種不同的組合一切都無濟於事。

那麼我錯過了什麼？

謝謝

來源

2017-04-30 StuartR143

你應該修正你的HTML文件第一，它是充滿了錯誤 –

這就是圍繞自帶了瑣細的用的東西得到它的工作，切東西出來，粘貼它放回再次..儘管我認爲「充分」的錯誤可能有點苛刻。這只是三個結束標籤，我錯了。但是，對於我想要達到的目標，沒有什麼不同。 – StuartR143

你有沒有嘗試過常用的技術來垂直對齊div中的項目？這是一個被問到的問題[一噸]（http://stackoverflow.com/a/8865463/4124802）。 – Django

之前關閉第一分度，非常感謝@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>

來源

2017-05-02 09:02:40 StuartR143

我不明白你爲什麼在td中使用div標籤。

你必須檢查的紅色標籤，因爲這是非常封閉的

您span標籤

來源

2017-04-30 17:03:21

我一開始沒有'tr'，但是我無法得到有色的裁決，無法正常工作它。至於爲什麼我繼續在'tr'內部使用'div'，我承認這部分是因爲我的代碼部分重用的開發者已經這樣做了。你會嵌套/跨越'tr'和'td'嗎？ – StuartR143

使文本和圖像垂直居中的問題

回答

相關問題