0
votes

Bootstrap Carousel Center Image verticale et horizontale

J'ai un carrousel à deux images où chaque image est une taille différente. J'essaie de les faire aligner tous verticalement au milieu afin de paraître beaucoup plus propre.

J'ai essayé: marge, affichage: bloc, vertical-alignement: milieu. Aucun ne rendez les images dans le centre de carrousel. xxx

html css twitter-bootstrap

0 commentaires

3 Réponses :

-1
votes

Essayez ceci xxx

0 commentaires

0
votes

.img-center-vertical {
display: inline-block;
text-align: center;
justify-content: center;
}

0 commentaires

1
votes

Nous pouvons atteindre cet accès à l'aide de la table d'affichage et de la cellule de table d'affichage.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" >



<div class="container">
  <div class="col-md-12 text-align-center">
    <h2 class="bold_font">FEATURED PARTNERS</h2><br>
  </div>
        <div class="row">
            <div class="col-xs-4">
              <a href="../cards/list-partners.php">
              <div class="hvrbox">
                <img src="http://placehold.it/300/f44336/000000" class="img-responsive hvrbox-layer_bottom">
                <div class=" hvrbox-mwc-orange hvrbox-layer_top hvrbox-layer_slideright">
                  <div class="hvrbox-text">
                    <h2>BROWSE<br>PARTNERS</h2>
                  </div>
                </div>
              </div>
              </a>
            </div>
            <div class="col-xs-8">
                <div id="imageCarousel" class="carousel slide" data-interval="false" data-ride="carousel" data-pause="hover" data-wrap="true">
                    <div class="carousel-inner">
                        <div class="item active">
                            <div class="row">
                                <div class="col-md-6 img-center-vertical">
                                    <img src="http://placehold.it/300/f44336/000000" class="img-responsive">
                                </div>
                                <div class="col-md-6 img-center-vertical">
                                    <img src="http://placehold.it/200/f44336/000000" class="img-responsive">
                                </div>
                            </div>
                        </div>
                        <div class="item">
                            <div class="row">
                                <div class="col-md-6 img-center-vertical">
                                    <img src="http://placehold.it/300/f44336/000000" class="img-responsive">
                                </div>
                                <div class="col-md-6 img-center-vertical">
                                    <img src="http://placehold.it/200/f44336/000000" class="img-responsive">
                                </div>
                            </div>
                        </div>

                    </div>

                    <a href="#imageCarousel" class="carousel-control left" data-slide="prev">
                        <span class="glyphicon glyphicon-chevron-left"></span>
                    </a>
                    <a href="#imageCarousel" class="carousel-control right" data-slide="next">
                        <span class="glyphicon glyphicon-chevron-right"></span>
                    </a>
                </div>

            </div>
        </div>
    </div>

1 commentaires

Content d'ententre ça. :)