Как отцентровать картинку неизвестных размеров внутри блока?

Тема в разделе "HTML, CSS, XML, JavaScript", создана пользователем Tander, 4 апр 2010.

  1. Tander

    Tander Гость

    Никак не получается разместить картинку по центру. Вот так выглядит HTML:
    Код (Text):
    <a class="gallery" href="img/part-1/Nicolas_001.jpg"><img src="img/part-1/Nicolas_001.jpg" class="gallery"></a>
    <a class="gallery" href="img/part-1/Nicolas_002.jpg"><img src="img/part-1/Nicolas_002.jpg" class="gallery"></a>
    <a class="gallery" href="img/part-1/Nicolas_004.jpg"><img src="img/part-1/Nicolas_004.jpg" class="gallery"></a>
    (и таких несколько десятков)
    А вот мой текущий CSS-код:
    Код (Text):
    /* Галлерея */
    a.gallery {
    border: 1px solid gray; /*Стиль рамки */
    background-color: #f6f6f6; /*Фоновый цвет ячейки*/
    width: 230px; /*Ширина ячейки*/
    height: 230px;
    padding: 5px;
    margin: 5px; /*Ширина отступов*/
    display: inline-block;
    text-align:center;
    }

    img.gallery {
    max-width: 230px; /* Ширина картинки*/
    max-height: 230px;
    height: auto;
    width:auto;
    border: 0px;
    }
    На данный момент картинка "отцентрована" по горизонтали, но по вертикали не получается вообще. И что больше всего мне не нравится - это выглядит так как будто ссылка выравнивается относительно картинки, хотя должно быть наоборот.
    Ну, с таким кодом это выглядит так:

    [​IMG]
     
  2. nws

    nws Гость

    img.gallery {
    max-width: 230px; /* Ширина картинки*/
    max-height: 230px;
    border: 0px;
    margin-left: auto;
    margin-right: auto;

    }
     
  3. Tander

    Tander Гость

    margin - это же отступ вовнутрь, какой смысл его прописывать картинке?
    Но я все равно попробовал - не работает.
    Насколько я понимаю - это была попытка выровнять по горизонтали. У меня это делает строка text-align:center;, прописанная в стиле ссылки. Моей проблемой является центровка по вертикали - я никак не могу найти толкового описания, как это можно сделать...
     
  4. nws

    nws Гость

    screen
     

    Вложения:

  5. Tander

    Tander Гость

    Посмотрите внимательней на мой код. Особенно на это:

    Код (Text):
        width: 230px;
    height: 230px;
    У меня ссылка является квадратным блоком с фиксированной высотой и шириной. А в вашем примере у вас высота блока такая же как высота картинки.
     
Загрузка...

Поделиться этой страницей