Выровнять div по сторонам div по центру таблицы CSS - PHP

Question

Как выровнять 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> и не в центре.

Как это исправить?

Answer 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://stackru.com/content/stackru/img/apple-touch-icon.png)"></div>
            <div class="image" style="background-image: url(https://stackru.com/content/stackru/img/apple-touch-icon.png)"></div>
            <div class="image" style="background-image: url(https://stackru.com/content/stackru/img/apple-touch-icon.png)"></div>
            <div class="image" style="background-image: url(https://stackru.com/content/stackru/img/apple-touch-icon.png)"></div>
            <div class="image" style="background-image: url(https://stackru.com/content/stackru/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 центрированы.
Вы также можете использовать CSS-класс в этой строке, когда очищаете свой код (отделяя HTML от стиля).

---

РЕДАКТИРОВАТЬ:

Небольшое тестирование я сделал (без CSS-классов).

$config['site']['purple'] = "purple";
$image = array(
    'Stackru' => 'https://stackru.com/content/stackru/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>';