2013-03-14 74 views
0

我試圖在一行中得到三個圖像,一個左對齊,一個居中,最後一個右對齊。我已經決定使用單行表來做到這一點,但我很難讓圖像集中在各自的單元格中。單排表格中的中心圖像

有沒有比我選擇的更好的方法呢?我不打算使用<td align="center">屬性,因爲它在HTML5中已被棄用,所以我正在尋找一種使用CSS的方法。這是我目前所面對的(我設置表格邊框屬性爲「1」,所以我可以看到小區內的影像對準如何呈現):

<style> 
    .centre_image 
    { 
    float:center; 
    } 
</style> 

<body> 
<table border="1"> 
    <tr> 
    <td class="centre_image"> 
     <object type="image/svg+xml" data="images/lawfirms.svg"> 
      <img src="images/lawfirms.png" alt=""/>  
     </object> 
    </td> 
    <td class="centre_image"> 
     <object type="image/svg+xml" data="images/industry.svg">  
      <img src="images/industry.png" alt=""/>  
     </object> 
    </td> 
    <td class="centre_image"> 
     <object type="image/svg+xml" data="images/in-house.svg">  
      <img src="images/in-house.png" alt=""/>  
     </object> 
    </td> 
    </tr> 
</table> 

此給出以下結果在Firefox 19.0在Ubuntu: enter image description here

,並得到以下結果在Chrome 25.0: enter image description here

編輯 - 這裏是做在j08691的答覆中提到的修改後的完整的HTML:

<!DOCTYPE html>  
<html xmlns="http://www.w3.org/1999/xhtml">  
<head> 
<meta charset="UTF-8"/>  
<title>SVG Included with <object> tag</title> 

<style> 
.centre_image 
{ 
text-align:center; 
} 
</style> 
</head> 

<body> 
<table border="1" style="width:100%"> 
    <tr> 
    <td class="centre_image"> 
     <object type="image/svg+xml" data="images/lawfirms.svg"> 
      <img src="images/lawfirms.png" alt=""/>  
     </object> 
    </td> 
    <td class="centre_image"> 
     <object type="image/svg+xml" data="images/industry.svg">  
      <img src="images/industry.png" alt=""/>  
     </object> 
    </td> 
    <td class="centre_image"> 
     <object type="image/svg+xml" data="images/in-house.svg">  
      <img src="images/in-house.png" alt=""/>  
     </object> 
    </td> 
    </tr> 
</table> 

</body> 
</html> 

這裏是納雷什·庫馬爾的回答結果: enter image description here

+2

浮點屬性沒有'center'值也請設置一個[** jsFiddle **](http://jsfiddle.net) – Adrift 2013-03-14 16:31:26

+1

嘗試重置您的。css行爲爲

,,​​,。它將幫助瀏覽器不一致。 – 2013-03-14 17:13:07

+0

這看起來不像表格數據... – cimmanon 2013-03-14 17:13:56

回答

3

由於沒有float:center財產,你嘗試過text-align:center

.centre_image { 
    text-align:center; 
} 

jsFiddle example

+1

賓果是他的名字-o。 – Michael 2013-03-14 16:35:07

+0

謝謝你的jsFiddle例子,但是表格仍然呈現相同的效果。我把完整的.html文件編輯爲我的問題,我做錯了什麼? – 2013-03-14 16:52:07

+1

感謝所有回答!問題在於我的圖像本身 - 作爲Inkscape的新手用戶,我已經將我的.svg文件保留爲600x400的大小 - 並且由於圖像本身並未集中在畫布上,因此我錯誤地認爲它被錯誤地渲染細胞。修復了Inkscape中的.svg文件,然後'text-align:center' CSS屬性工作得很好。 – 2013-03-14 19:56:14

0

嘗試類似:

.centre_image{ 
    text-align:center; 
    margin-left:auto; 
    margin-right:auto; 
} 

我希望這會幫助你。

+0

感謝您的輸入Francois,不幸的是這沒有什麼區別 - 請參閱編輯我的問題並回復j08691的答案。 – 2013-03-14 17:16:27

0

在HTML5 vAlign中已棄用。這裏有一個提示將所有三張圖片放在side li標籤中。在CSS中爲li標籤分配一個屬性顯示:inline block。

+0

感謝您輸入Naresh,請查看我對我的問題所做的修改。 – 2013-03-14 17:03:16

0

有很多方法可能導致錯誤。特別是'浮動:中心'。

fiddled an example這裏 和另一fiddle with basic .css復位這裏

既然你要在TD標籤horizo​​ntaly中心,你可以簡單地對準它..

<td align="center"> 

但是你將注意到「對齊'property''deprecated',你會被建議使用CSS來代替。對於這一點,其他人已經表現出你的答案

.centre_image { 
    text-align:center; 
    vertical-align:middle; 
} 

這將CSS,只要工作你的元素不是「浮動」

附: 'DEPRECATED'並非邪惡。

p.s. w3school在StackOverflow上有一個not so good reputation

+0

告訴我,是''表'邊界=「1」**'>棄用? – 2013-03-14 17:08:40

+0

感謝您的輸入Milche,但文本對齊:中心不適合我。請參閱我對j80691的回答的評論,以及對我的問題的編輯,其中列出了完整的HTML。我可能在做一些非常基本的錯誤:-) – 2013-03-14 17:10:09

+0

不,根據http://www.w3schools.com/tags/att_table_border.asp,邊界屬性不會被棄用。去除它似乎沒有區別。 – 2013-03-14 17:14:12