Отцентровать картинку неизвестных размеров

[webFinder]

Никак не получается разместить картинку по центру

Код Выделить Развернуть

<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

Код Выделить Развернуть


/* Галлерея */
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;
}


На данный момент картинка "отцентрована" по горизонтали, но по вертикали не получается вообще. И что больше всего мне не нравится - это выглядит так как будто ссылка выравнивается относительно картинки, хотя должно быть наоборот.

[Sevab]

Код Выделить Развернуть


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


[drummer]

Или просто

Код Выделить Развернуть

align:center;

[lexxxx]

По вертикали просто так не отцентрировать. Тут есть два варианта:

1. Делаем body и html высоту 100%, поместить ваши картинки в таблицу, в таблице задать высоту и ширину 100%, потом столбцу ширину 100%, высоту 99%, ну и вырабнивание по середине (vertical-align:middle)

2. Это широко известный вариант с divом. Обернуть все это дело в div, ему задать ширину и высоту, затем position:absolute; left:50%; top:50%; margin-top: (-половина высоты), margin-left: (- половина ширины).

Но все это такой лишний гемморой, что советую либо делать с помощью JS, либо вообще избегать центровки по середине окна по вертикали и просто делать сверху отступ.

[SeoBrabus]

тоже столкнулся с проблемой правда немного другого параметра, вот сайт avtomatoff.com в материале на главной есть карусель из фoто, в ФФ отображается все нормально а вот опера не хочет (немерено растягивает картинки), кто что может посоветовать?
CSS
   .roundabout-holder {
         padding: 0;
         height:135px;
         list-style: none;
         width:250px;
         margin: 0px 0px 0px  0px;
      z-index:1;
   }
   
   .roundabout-moveable-item {
      width:50px;
        height: 100px;
      margin-left: 0px;
      cursor: pointer;
     z-index:1;
   }
   
   .roundabout-moveable-item img {
        width:100%;
        height: 100%;
      margin-left: 0px;
      cursor: pointer;
     z-index:1;
   }
      


   .roundabout-in-focus { cursor: auto; }
   .roundabout-holder img {  border: 0px solid #fff;}