align div aside div to center of table CSS - PHP

Question

How to align div aside another div and centralize it in a table?

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>';

I'm getting the divs one aside other perfectly but it still at the left of the <td> and not at the center.

How to fix it?

Quick sidenote: don't put the CSS inside the tag, use a seperate CSS Stylesheet and give the divs a class — BlueCacti, Mar 05 '14 at 22:06
For the centering: A left- and right-margin of `auto` will align your objects horizontally. You do need to set a width to the object, as you have done in your example. You can use a shorthand CSS notation for that: `margin: top/bottom right/left;` — BlueCacti, Mar 05 '14 at 22:08
@GroundZero forgive me for my stupidity, but no attempt worked :/ — user3050478, Mar 05 '14 at 22:22

BlueCacti · Accepted Answer · 2014-03-05T22:37:20.537

Check this JSfiddle. You need less formatting than I thought :p

http://jsfiddle.net/5c2Vj/

NOTE: I manually added some div's for testing purposes.

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 */
}

Thanks to the align="center" on the TR-element, the div's are centered.
You can use a CSS class on that row too, when you clean up your code (seperating HTML from the styling).

EDIT:

A little testrun I did (without CSS-classes).

$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>';

thanks @GroundZero, now I got the divs aside other and at the center of the td element perfectly! — user3050478, Mar 05 '14 at 22:27
@user3050478 You can also check this out: [PHP Sandbox](http://sandbox.onlinephpfunctions.com/code/c99b0f02777554232d5acea31faa22c53f7f19c0). You can use the result in the a [JS-fiddle](http://jsfiddle.net/GVBwv/1/) for a visual result. — BlueCacti, Mar 05 '14 at 22:33
Thanks! I was looking for a program with this function, but on your code I seen the JS-fiddle and now I copy that. — user3050478, Mar 05 '14 at 22:34

align div aside div to center of table CSS - PHP

1 Answers1