Centering the webpage content

Question

I need an advice about how to center article2 element. Here is the HTML code:

<article class="article2">

    <h1 class = "nadpis2">Co nabízím?</h1>
    <h2 class = "nadpis3">Jaké služby vám mohu nabídnout a jak se domluvit?</h2>  


      <div class="img">
        <img src="obr-kontakt.png" alt="">
        <div class="desc">Zkontaktujte mne</div>
      </div>

      <div class="img">
        <img src="obr-wait.png" alt="">
        <div class="desc">Vyčkejte na odpověď</div>
      </div>

      <div class="img">
        <img src="obr-lidi.png" alt="">
        <div class="desc">Domluvíme se na vašich požadavcích</div>
      </div>

      <div class="img">
        <img src="obr-design.png" alt="">
        <div class="desc">Vytvořím vám design na míru</div>
      </div>

      <div class="img">
        <img src="obr-html.png" alt="">
        <div class="desc">Pomocí HTML/CSS web zrealizuji</div>
      </div>

      <div class="img">
        <img src="obr-penize.png" alt="">
        <div class="desc">Web vám prodám za nejnižší ceny</div>
      </div>

</article>     

And here is the CSS code:

.article2 {
 padding-top: 20px;
 height: 900px;
 width: auto;
 background-color: white;
 margin: auto;
 }


  .img{
  padding: 7px 90px 90px 90px;
  height:auto;
  width:auto;
  float:left;
  text-align:center; 
  margin: 0 auto;
  }

.img img
  {
  display:inline;
  margin:5px;

  }

.desc
  {
  text-align:center;
  font-family: 'Abel';
  font-size: 20px;
  width:120px;
  margin:5px;
  }

Also, when I change the browser window size, It pretty much destroys the whole page concept because It expands a lot.

EDIT: I actually need those images to be centered on the page. They are containered in the article element.

How do I fix this? Thanks.

Answer 1

By the light of you last comment, I'll go for a table (See the fiddle: http://jsfiddle.net/stephanedeluca/LyL93/1/)

<table>
    <tbody>
        <tr>
            <td>
                <img src="obr-kontakt.png" alt=""/>
                <div class="desc">Zkontaktujte mne</div>
            </td>
            <td>
                <img src="obr-wait.png" alt=""/>
                <div class="desc">Vyčkejte na odpověď</div>
            </td>
            <td>
                <img src="obr-lidi.png" alt=""/>
                <div class="desc">Domluvíme se na vašich požadavcích</div>
            </td>
        </tr>
        <tr>
            <td>
                <img src="obr-design.png" alt=""/>
                <div class="desc">Vytvořím vám design na míru</div>
            </td>
            <td>
                <img src="obr-html.png" alt=""/>
                <div class="desc">Pomocí HTML/CSS web zrealizuji</div>
            </td>
            <td>
               <img src="obr-penize.png" alt=""/>
               <div class="desc">Web vám prodám za nejnižší ceny</div>
             </td>
        </tr>
    </tbody>
</table>

And a simplified CSS, as follows:

.article1 {
    padding-top: 20px;
    height: 850px;
    width: 100%;
    background-color: white;
    margin: auto;
    border: solid 1px red;
} 

table {
    margin: auto;
}
td {
    padding:5px;
    text-align: center;
    vertical-align: top;
}

.desc {
  text-align:center;
  font-family: 'Abel';
  font-size: 20px;
  width:120px;
  margin:5px;
}