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

나는 그것은 <td>의 왼쪽에서 중앙이 아닌 여전히 완벽하게 옆으로 한 다른 된 div를 받고 있지만 있어요.

문제를 해결하는 방법은 무엇입니까?

Answer 1

이 JSFiddle을 확인하십시오. P

http://jsfiddle.net/5c2Vj/

참고 : 당신은 내가 생각했던 것보다 덜 형식을 필요로 내가 수동으로 테스트 목적으로 일부 사업부의의를 추가했습니다.

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상의 TR-요소에 align="center"에

div.image { 
    display: inline-block; 
    width: 24%; 
    height:130px; 
    border: 1px solid black; /* For visual reference */ 
} 

덕분에, 사업부의의 중심입니다.
코드를 정리할 때 (스타일에서 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>';