檢查此JSfiddle。你需要比我想象的那樣格式化:對
http://jsfiddle.net/5c2Vj/
注意:我手動添加了一些div的用於測試目的。
HTML
<table border="0" cellspacing="1" cellpadding="7" width="100%">
<tr bgcolor="purple">
<td align="center">
<div class="image" style="background-image: url(https://stackoverflow.com/content/stackoverflow/img/apple-touch-icon.png)"></div>
<div class="image" style="background-image: url(https://stackoverflow.com/content/stackoverflow/img/apple-touch-icon.png)"></div>
<div class="image" style="background-image: url(https://stackoverflow.com/content/stackoverflow/img/apple-touch-icon.png)"></div>
<div class="image" style="background-image: url(https://stackoverflow.com/content/stackoverflow/img/apple-touch-icon.png)"></div>
<div class="image" style="background-image: url(https://stackoverflow.com/content/stackoverflow/img/apple-touch-icon.png)"></div>
</td>
</tr>
</table>
CSS
div.image {
display: inline-block;
width: 24%;
height:130px;
border: 1px solid black; /* For visual reference */
}
得益於align="center"
的TR-元素,div的居中。
當您清理代碼(從樣式中分離HTML)時,您也可以在該行上使用CSS類。
編輯:
小testrun我做了(不CSS類)。
$config['site']['purple'] = "purple";
$image = array(
'StackOverflow' => 'https://stackoverflow.com/content/stackoverflow/img/apple-touch-icon.png',
'W3C' => 'http://www.propra.nl/img/w3c.png',
'CSS' => 'http://a.dryicons.com/images/icon_sets/coquette_part_5_icons_set/png/128x128/css_file.png',
'HTML' => 'http://a.dryicons.com/images/icon_sets/coquette_part_5_icons_set/png/128x128/html_file.png',
'LifeIsPain' => 'http://oldpunks.com/1iconlifeispain.gif'
);
echo '<table border="0" cellspacing="1" cellpadding="7" width="100%">
<tr bgcolor="'.$config['site']['purple'].'">
<td align="center">';
foreach($image as $name => $location){
echo '<div style="display: inline-block; width: 24%; height:130px; border: 1px solid black; background-image:url('.$location.');background-size:100%;"></div>';
}
echo '</td>
</tr>
</table>';
快速旁註:不要把CSS標籤內,用一個單獨的CSS樣式表,並給div的一類 – GroundZero
謝謝回答,讓我試試這個。 – user3050478
對於居中:'auto'的左右邊距將水平對齊您的對象。您需要爲對象設置寬度,就像您在示例中所做的那樣。你可以使用一個簡寫的CSS表示法:'margin:top/bottom right/left;' – GroundZero