Question

我需要一个关于如何集中article2元素的建议。这是HTML代码：

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

这是CSS代码：

.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;
  }

此外，当我更改浏览器窗口大小时，它几乎破坏了整个页面概念，因为它扩展了很多。

编辑：我实际上需要将这些图片置于页面的中心位置。它们包含在文章元素中。

我该如何解决这个问题？感谢。

Answer 1

只需将宽度添加到.article1。

请看我的小提琴：http://jsfiddle.net/stephanedeluca/LyL93/

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

我还修正了几个拼写错误或不一致：.article1，结束标签等

Answer 2

这是我经常使用的一些css ...自己动手

html {
    height:100%; 
    max-height:100%; 
    padding:0; 
    margin:0; 
    border:0; 
    overflow:hidden; 
}

body {
    position:relative;
    height:100%; 
    max-height:100%; 
    overflow:hidden; 
    padding:0; 
    margin:0; 
    border:0; 
}

.article2 {
 padding-top: 20px;
 height: 900px;
 /*width: auto;*/
 width:1000px; /* you probably need a width so margin:auto will work  */
 margin: auto;
}

Answer 3

根据你最后的评论，我会去找一张桌子（见小提琴：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>

简化的CSS，如下：

.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;
}

居中网页内容

3 个答案: