IE7對齊表格單元格中的按鈕旁邊的文本

我有這個簡單的表格，最後一行顯示圖片按鈕旁邊的文本。除了IE7之外，這在其他瀏覽器中運行良好。IE7對齊表格單元格中的按鈕旁邊的文本

<table> 
    <tr> 
     <td>Some header</td> 
     <td>Some other header</td> 
    </tr>    
    <tr> 
     <td colspan="2" class="infoRow">Info: 
     <input type="image" class="infoButton" src="Images/down_arrow.png" /></td> 
    </tr> 
</table>

從CSS文件：

.infoButton 
{ 
    float: right; 
    padding: 0; 
    margin-left: 20px; 
} 

.infoRow 
{ 
    text-align: right; 
}

IE7顯示文本一路在表格單元格右側和圖像按鈕是在它之下，並靠右對齊。我想顯示圖像按鈕左側的「Info：」文本，該文本在其他瀏覽器中正常工作。

來源

2012-07-04 Oliver Nilsen

我相信如果你只是刪除浮球，你會沒事的。

來源

2012-07-04 08:28:58 powerbuoy

這工作的工作！謝謝。但是現在文本不是垂直居中在圖像按鈕旁邊。我已經嘗試過「vertical-align：top」，它將文本置於圖像的垂直中心。適用於Chrome，但不適用於IE。該死的 –

@OliverNilsen，看看[這個]（http://css-tricks.com/centering-in-the-unknown/）。 –

我認爲'td'上的'vertical-align：middle'應該可以工作。 – powerbuoy

如果您將style="vertical-align:middle;"應用到輸入（並刪除float），這應該在IE中工作。

我在IE瀏覽器的所有版本嘗試這樣做，永遠怪癖和它的作品，所以我不知道爲什麼它不會爲你看到下面的代碼：

風格： .infoButton {vertical-align:middle;padding:0;margin-left:20px;} label {vertical-align:middle;} .infoRow{text-align:right;}

html： <td class="infoRow" valign="middle"><label>Info:</label><input type="image" class="infoButton" src="Images/down_arrow.png" /></td>

來源

2012-07-04 09:00:47 JoProte

我的文字仍未居中在圖像的左側。 –

嗯，它在IE7中對我來說工作得很好，你有使用colspan =「2」的原因嗎？如果您將文本和圖像放在單獨的''和'valign =「middle」中，那麼它們就會起作用。例如'信息： ' – JoProte

我已經有了幾行的表格。最後一行是我想放置「Info」標籤和一個小圖片的位置：27px x 27px。而且我希望所有這一切都在一行中，一切都是右對齊的，並且信息標籤位於圖像的左側。聽起來很簡單，但我無法弄清楚。 –

我看到左邊的文字和右邊的按鈕在我的IE7中。

您可以嘗試在td上添加「white-space：nowrap」樣式。

來源

2012-07-04 09:23:18

沒有任何變化：/ –

最好是把你的信息文本標籤標記<label>info<label/>這會爲IE7

來源

2012-07-04 09:49:59 dsfg

我沒有嘗試過。在Chrome中運行良好。但不是我IE。耶穌我討厭IE瀏覽器。 –

IE7對齊表格單元格中的按鈕旁邊的文本

回答

相關問題