Центр исчезает в изображении

Question

Я создаю простую галерею изображений с помощью jquery, но сталкиваюсь с досадной проблемой. Поскольку изображения имеют разные размеры, я центрировал их все, чтобы они выглядели равномерно. Однако встроенные методы fadeIn / fadeOut сбивают это центрирование, и я не совсем уверен, что происходит. Я попытался вручную добавить класс центрирования снова, затем вручную добавив CSS, но не смог получить изображение по центру, как только оно стало видимым. Мысли

css -

.center { margin: 0 auto; }
img.invisible { display: none; }
img.visible { margin: 0 auto; display: block;}

разметка -

<div id="content" class="center gallery">

    <img src="images/event/event_1.jpg" alt="alt-text" class="visible" />
    <img src="images/event/event_2.jpg" alt="alt-text" class="invisible" />
    <img src="images/event/event_3.jpg" alt="alt-text" class="invisible" />

    <div id="selection" class="overlay">
        <div class="select first">
            <a href="#" rel="1"><img src="images/event/event_1_small.jpg" /></a>
        </div>
        <div class="select">
            <a href="#" rel="2"><img src="images/event/event_2_small.jpg" /></a>
        </div>
        <div class="select">
            <a href="#" rel="3"><img src="images/event/event_3_small.jpg" /></a>
        </div>
    </div> 

jQuery -

function updateImage(img_num) {
    var cur_img = $("#content img.visible");
    var next_img = $('#content img[src^="' + img_path + img_num + '.jpg"]');

    cur_img.fadeOut('600',function() {
        next_img.fadeIn('600');
        next_img.removeClass("invisible").addClass("visible");
        cur_img.removeClass("visible").addClass("invisible");
    });
}

Answer 1

Хорошо, это было удивительно.Чтобы решить эту проблему, я попытался использовать fadeTo, который показал, что проблема заключалась в том, что изображениям, которые были сделаны видимыми, было дано display: inline;, поэтому все, что нужно для решения этой проблемы, было.

.gallery { text-align: center; }

Я думал, что jQuery просто меняетсянепрозрачность, но, кажется, также изменить дисплей.Tricky.

Answer 2

Вы добавляете margin: 0 auto; только к классу .visible, его необходимо применить ко всем изображениям:

.gallery img{margin:0 auto;display:none}
.gallery img.visible{display:block}