Блог

Я использую вид сетки, мне нужен вид сетки в центре экрана, как я могу это сделать?

CSS:

  .grid-container {
    margin-left: auto;
    margin-right: auto;
    width: 302px;
    height: 452px;
    }

    .grid-row {
        width: 302px;
        height: 150px;
        margin-bottom: 1px;
    }

    .grid-row_last-child {
        margin-bottom: 0px;
    }

    .grid-row a {
        position:relative;
        float: left;
        display: block;
        width: 100px;
        height: 150px;
        margin-right: 1px;
    }
    .grid-row a:last-child {
        margin-right: 0px;
    }
 

HTML:

  <div class="grid-container">
                    <div class="grid-row">
                        <a href="index.htm">
                            <img alt="alt..." src="http://th01.deviantart.net/fs12/150/i/2006/287/3/4/puppy_pug_3_by_WeiTat.jpg" />
                        </a>
                    </div>
                    <div class="grid-row">
                        <a href="index.htm">
                            <img alt="alt..." src="http://th01.deviantart.net/fs12/150/i/2006/287/3/4/puppy_pug_3_by_WeiTat.jpg" />
                        </a>
                    </div>
            </div>
 

Из приведенного выше кода я получаю положение сетки, как показано на снимке экрана ниже,

Но мне нужно положение сетки, как показано на экране ниже

Этот CSS должен работать для вас (см. демонстрацию http://jsfiddle.net/2map4/1 /):

  .grid-container {
    margin-top: 100px;
    margin-left: auto;
    margin-right: auto;
  }

.grid-row img{
    margin-left: auto;
    margin-right: auto;
    display: block;
}
 

Поскольку вы не можете центрировать вертикально, вам нужно будет приспособиться margin-top к тому, что работает для вас.

несколько изменений в css: Demo

 .grid-row {
        width: 302px;
        height: 150px;
        margin-bottom: 1px;
        text-align:center;
    }

.grid-row a {
       position:relative;
        /*float: left;*/
        display: inline-block;
        width: 100px;
        height: 150px;
        margin-right: 1px;
  }