将 div 与 div 对齐到表格的中心 CSS - PHP答案

【问题标题】：align div aside div to center of table CSS - PHP将 div 与 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>';

我将 divs 完美地放在一边，但它仍然在 <td> 的左侧，而不是在中心。

如何解决？

【问题讨论】：

快速旁注：不要将 CSS 放在标签内，使用单独的 CSS 样式表并给 div 一个类
感谢您的回答，让我试试这个。
对于居中：auto 的左右边距将使您的对象水平对齐。您确实需要为对象设置宽度，就像您在示例中所做的那样。您可以为此使用简写 CSS 表示法：margin: top/bottom right/left;
@GroundZero 原谅我的愚蠢，但没有任何尝试成功：/

标签： php css alignment behind

【解决方案1】：

检查这个 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>';

【讨论】：

感谢@GroundZero，现在我将 div 放在一边，完美地位于 td 元素的中心！
@user3050478 您也可以查看：PHP Sandbox。您可以使用JS-fiddle 中的结果来获得视觉结果。
谢谢！我一直在寻找具有此功能的程序，但在您的代码中我看到了 JS-fiddle，现在我复制了它。