Центр вертикальной карусели в экране мобильного - PullRequest
Новая
       38

Центр вертикальной карусели в экране мобильного

0 голосов
/ 17 февраля 2020

Я пытаюсь отцентрировать вертикальную карусель Boostrap на мобильном телефоне,

Я использовал этот код: 

@media only screen and (orientation: portrait) and (max-width:768px) {

.carousel-item active{
    height: 100%;
}

.carousel-item{
    height: 100%;
}

body{
    height: 100%;
    background-color: black;
}

.container- {
    top: 50%;
    transform: translateY(-50%);
    position: fixed;   
}

#fullscreen {
    position: absolute;
    top:2% !important;
    right:2%;
    height:3rem;
    width: 3rem;
    color: black;
    cursor: pointer;
}

#arrow-right, #arrow-left {
    position: absolute;
    top:50%;
    width: 3rem;
    height: 3rem;
    transform: translateY(-50%);
    font-size: 2.5em;
    cursor: pointer;
}

#arrow-left {
    left:5%;
}

#arrow-right {
    right:5%;
}

}

<div class="container-">
  <div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img class="d-block w-100" src="<?php echo base_url();?>uploads/images/output-3.png" alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="<?php echo base_url();?>uploads/images/output-4.png" alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="<?php echo base_url();?>uploads/images/output-4.png" alt="Third slide">
    </div>
  </div>
  <img id="arrow-left" src = "<?php echo base_url();?>css/arrow-left.png"> </img>
  <img id="arrow-right" src = "<?php echo base_url();?>css/arrow-right.png"> </img> 
</div>

<img id="fullscreen" src = "<?php echo base_url();?>css/fs.png"></img> 

</div>

Когда мобильный телефон находится в портретном положении, моя карусель расположена вертикально по центру, но когда я иду в полноэкранном режиме карусель движется вверху экрана. Я использую положение: зафиксировано, чтобы центрировать мою карусель по вертикали. Похоже, что фиксированная позиция отключена, когда мобильный телефон выходит на полный экран.

...