Question

我是一名平面设计师（自由职业者），使用css构建一个3列5行的图像页面，页面工作正常，当您调整浏览器大小时，它会下降到2列，然后是1列，唯一问题是，当我希望它们保留在中心时，列会在浏览器的左侧捕捉。我从这里看了几个方法，但无法工作。我是CSS布局的新手，但不是HTML。我试图在没有bootstrap的情况下这样做，因为我想学习CSS，就像我用HTML做的那样。

here is a link to the page i am trying to build

以下是我正在使用的代码，我不确定它是否正确...谢谢。

＆＃13;

     <style type="text/css"> 
           
           body {

           background-color: #F3F3F3;

           font-family: "Lucida Sans Unicode", "Lucida    Grande", sans-serif;

           font-size: 18px;

           color: #000;

         }

         #center {

           display: block;

           position: relative;

           top: -12px;

           width: 169px;

           margin: auto;

         }

         #wrapper {

           display: block;

           border: 2px;

           border-color: #FF30;

           margin-left: auto;

           margin-right: auto;

           min-width: 340px;

           max-width: 1040px;

         }

         </style>

＆＃13;

    <!DOCTYPE html>
    <!--[if IE 7]>
        <html class="ie ie7" lang="en-US">
        <![endif]-->
    <!--[if IE 8]>
        <html class="ie ie8" lang="en-US">
        <![endif]-->
    <!--[if !(IE 7) | !(IE 8)  ]><!-->

    <html lang="en-US">
    <!--<![endif]-->

    <head>
      <meta charset="UTF-8" />

      <meta name="viewport" content="width=device-width, maximum-scale=1" />
      <title>Kieron Livingstone</title>


    </head>


    <div id="center">
      <img src="img/page/tagname2.gif" width="169" height="28">
    </div>

    <div id="wrapper">

      <img src="img/ns_o.jpg" name="shaman_nike" width="340" height="200" border="0">


      <img src="img/mos.jpg" name="Image11" width="340" height="200" border="0">


      <img src="img/bo.jpg" name="Image12" width="340" height="200" border="0">

      <img src="img/nw.jpg" name="Image13" width="340" height="200" border="0">


      <img src="img/n_f.jpg" name="Image14" width="340" height="200" border="0">


      <img src="img/s.jpg" name="Image15" width="340" height="200" border="0">


      <img src="img/fr.jpg" name="Image17" width="340" height="200" border="0">



      <img src="img/n_o.jpg" name="Image16" width="340" height="200" border="0">

      <img src="img/h_f.jpg" name="Image18" width="340" height="200" border="0">

      <img src="img/ztm.jpg" name="Image19" width="340" height="200" border="0">


      <img src="img/gg.jpg" name="Image19" width="340" height="200" border="0">


      <img src="img/1234.jpg" name="Image19" width="340" height="200" border="0">



      <img src="img/nm.jpg" name="Image19" width="340" height="200" border="0">


      <img src="img/bab.jpg" name="Image19" width="340" height="200" border="0">


      <img src="img/nm.jpg" name="Image19" width="340" height="200" border="0">

    </div>





    </body>

    </html>

＆＃13;

Answer 1

问题在于目前没有任何内容包装div的内容。当视口的宽度大于＆lt; = 1040px时，它恰好看起来正常，因为3个340px宽的图像完全填满它，而你的margin-left：auto和margin-right：auto负责将窗口中的包装div置于中心位置

如果你添加

text-align: center;

到

#wrapper
{
    ...
}

然后，这将把你的包装div中的内容集中在一起。

我希望在调整浏览器大小时使我的图像居中

1 个答案: