Блог

Я создал простую карусель с внешним DIV, ширина и высота которой установлены на 600 X 800, а позиция установлена в «position: relative», а изображения внутри этого DIV должны быть «position: absolute» с верхним и левым значением, равным нулю. Я также сохранил кнопку «влево / вправо», чтобы всякий раз, когда я нажимаю кнопку влево / вправо, изображения перемещались влево / вправо соответственно с помощью jQuery. Все работает нормально, включая адаптивный. Но у меня проблема, когда у меня разные размеры изображений, я хочу отобразить их в горизонтальном и вертикальном центре («выравнивание по вертикали: по центру»). Я пробовал разные способы в CSS, но, похоже, безуспешно. Я знаю, что могу сделать это с помощью JavaScript, но интересно, может ли кто-нибудь помочь мне, используя только CSS, пожалуйста, очень признателен… Я хочу избегать JavaScript, если это возможно. Пожалуйста, обратите внимание, что в этой карусели отображается по одному изображению за раз. Вот как я спроектировал / запрограммировал.

Это мой текущий код :

 <div style="position:relative;">
   
    // image style is set to position:absolute;left:0;top:0
    //  _______________________________________
    //  |           |          |               |
    //  |           |          |_______________|
    //  |           |          |               
    //  |___________|          | 
    //              |__________|
    //

</div>
  

Я хочу, чтобы это было так :

 <div>
   
    //              ___________
    //  ____________|          |
    //  |           |          |_______________
    //  |           |          |               |
    //  |           |          |_______________|
    //  |___________|          | 
    //              |__________|

</div>
  

Спасибо.

Вы можете использовать flexbox в вашем контейнере div.

 div {
  display: flex;
  flex-direction: row;
  align-items: center;
}