Question

我有两个图像轮播，其中每个图像的大小都不同。我试图使它们全部在中间垂直对齐，以使其看起来更干净。

我尝试过：边距，显示：块，垂直对齐：中间。没有一个在轮播中心制作图像。

<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="img/_stock_mwc_partners.jpg" 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="2000" 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="img/uploads/merchant-12-GLOBAL ELITE DENTAL CLINIC.jpg" class="img-responsive">
                                </div>
                                <div class="col-md-6 img-center-vertical">
                                    <img src="img/uploads/merchant-17-Mimmo Logo.jpg" class="img-responsive">
                                </div>
                            </div>
                        </div>
                        <div class="item">
                            <div class="row">
                                <div class="col-md-6 img-center-vertical">
                                    <img src="img/uploads/merchant-18-LOGO CORE.png" class="img-responsive">
                                </div>
                                <div class="col-md-6 img-center-vertical">
                                    <img src="img/uploads/merchant-19-docnic_newlogo-3.png" 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>

Answer 1

我们可以使用显示表格和显示表格单元格来实现此目的。

.item row{
  display:table;
}

.img-center-vertical{
  display:table-cell;
  vertical-align:middle;
  height:300px;
  float: inherit;
}

<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>

签出codepen

Answer 2

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

}

Answer 3

尝试一下

.img-center-vertical {
    display: flex;
    align-items: center;
    justify-content: center;
}

引导旋转木马中心图像垂直和水平

3 个答案: