2
votes

Comment réparer verticalement les flèches de navigation?

J'ai un album modal qui montre des images de différentes tailles. Mon objectif est de savoir comment styliser les flèches de navigation, de sorte qu'elles apparaissent au milieu de la page, quelle que soit la taille de l'image. Voici mon code:

.modal-img {
  max-height: 1080px;
}

.img-box {
   display: flex;
   align-items:center;
}
.nav-arrow {
  font-size: 3em;
  position: absolute;
  top: 50%;
}

Et voici le css pertinent:

<div class="row img-box">
    <div class="col-1">
        <span @click="nextImg(-1)"  class="nav-arrow">&#10094;</span>
    </div>
    <div class="col-9">
        <h1>Modal comes here</h1>
        <img class="img-fluid modal-img" :src=" getImgUrl(currentMediaUrl)">
    </div>
    <div class="col-1">
        <span @click="nextImg(1)" class="nav-arrow">&#10095;</span>
    </div>
</div>

Mais quoi que je modifie le CSS ne peut pas obtenir l'effet souhaité . D'où la question.

html css bootstrap-4

3 commentaires

est-ce ce que vous recherchez? http://jsfiddle.net/vcw701Ld/

Eh bien, fondamentalement oui. Mais les flèches sautent toujours de haut en bas, selon la taille de l'image.

jsfiddle.net/vcw701Ld/2 cela fonctionnera peut-être mieux, mais vous devrez changer le CSS à ce que tu veux. parce que les boutons sont maintenant à un haut: 25%; et cela peut être ajusté à tout ce que vous voulez.

3 Réponses :

1
votes

Utilisez la position fixed

<div class="row img-box">
    <div class="col-1">
        <span @click="nextImg(-1)"  class="nav-arrow nav-left">&#10094;</span>
    </div>
    <div class="col-9">
        <h1>Modal comes here</h1>
        <img class="img-fluid modal-img" src="https://via.placeholder.com/500C/O https://placeholder.com/">
    </div>
    <div class="col-1">
        <span @click="nextImg(1)" class="nav-arrow nav-right">&#10095;</span>
    </div>
</div>

.modal-img {
  max-height: 1080px;
}

.img-box {
   display: flex;
   align-items:center;
   justify-content: center;
}
.nav-arrow {
  font-size: 3em;
  position: fixed;
   top: 120px;  
}
.nav-left {   
  left: 10px; 
}
.nav-right { 
    right: 10px;   
}

2 commentaires

les navs sautent toujours lorsque la taille de l'image change.

Si la hauteur de l'image est plus, le corps défilera, de sorte que la flèche sautera. Donc, au lieu de la valeur de pourcentage (%), gardez px // Vérifier ma modification

0
votes

vous devez appliquer transform: translateY (-50%) sur le conteneur de flèches, afin de mettre les flèches au centre.

.nav-arrow {
  font-size: 3em;
  position: absolute;
  top: 50%;
   transform: translateY(-50%)
}

ou simplement, supprimer position: absolue; haut: 50%;

0 commentaires

0
votes

Cela fonctionne-t-il pour vous? J'ai ajouté la classe d'amorçage align-items-center et un peu de rembourrage aux étendues

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet"/>

        
<div class="row img-box align-items-center">
    <div class="col-1 ">
        <span @click="nextImg(-1)"  class="nav-arrow pt-5 d-inline-block">&#10094;</span>
    </div>
    <div class="col-9 text-center">
    <h1>Modal comes here</h1>
        <img class="img-fluid modal-img" src="https://via.placeholder.com/100/O https://placeholder.com/">
    </div>
    <div class="col-1">
        <span @click="nextImg(1)" class="nav-arrow pt-5 d-inline-block">&#10095;</span>
    </div>
</div>

.modal-img {
  max-height: 1080px;
}


.nav-arrow {
  font-size: 3em;
  position: relative;
}

0 commentaires