将div与表CSS - PHP的中心对齐。
将div与表CSS - PHP的中心对齐。
提问于 2014-03-05 21:59:29
如何将div与另一个div对齐，并将其集中到表中？
echo '<table border="0" cellspacing="1" cellpadding="7" width="100%">';
echo '<tr bgcolor="'.$config['site']['purple'].'">';
echo '<td align="center">';
foreach($image as $img){
echo '<div style="width:24%;height:130px;position:relative;float:left;margin:2px auto;background-image:url('.$img['location'].');background-size:100%;"></div>';
}
echo '</td>';
echo '</tr>';
echo '</table>';我正在把div另一个完美地放在一边，但它仍然在<td>的左边，而不是中间。
怎么修呢？
回答 1
Stack Overflow用户
回答已采纳
发布于 2014-03-05 22:21:56
看看这个JSfiddle。您需要的格式比我想象的要少:p
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 */
}由于TR-元素上的align="center"，div是居中的。
在清理代码(将HTML与样式分离)时，您也可以在该行上使用CSS类。
编辑：
我做了一个小测试(没有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>';页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/22210268
复制相关文章
相似问题
腾讯云开发者
