Question

这是我的代码示例。在浏览器的full-width中，一切看起来都很好。但是当我调整大小时，图像（卡片）更靠左侧（不居中）。我该如何解决这个问题？

HTML code：

<div  class="container-fluid">          
        <div class="row ">
            <div class="col-md-2">
                <figure class="imghvr-fold-up">
                    <figcaption class="text-center">
                        Hello                           
                    </figcaption>                        
                    <img src="http://via.placeholder.com/200x200" class="img-thumbnail" alt="Cinque Terre">
                </figure>              
            </div>
            <div class="col-md-2">
                <figure class="imghvr-fold-up">
                    <figcaption class="text-center">
                        Hello                           
                    </figcaption>                        
                    <img src="http://via.placeholder.com/200x200" class="img-thumbnail" alt="Cinque Terre">
                </figure>    
            </div>
            <div class="col-md-2">
                <figure class="imghvr-fold-up">
                    <figcaption class="text-center">
                        Hello                           
                    </figcaption>                        
                    <img src="http://via.placeholder.com/200x200" class="img-thumbnail" alt="Cinque Terre">
                </figure>    
            </div>
            <div class="col-md-2">
                <figure class="imghvr-fold-up">
                    <figcaption class="text-center">
                        Hello                           
                    </figcaption>                        
                    <img src="http://via.placeholder.com/200x200" class="img-thumbnail" alt="Cinque Terre">
                </figure>    
            </div>
            <div class="col-md-2">
                <figure class="imghvr-fold-up">
                    <figcaption class="text-center">
                        Hello                           
                    </figcaption>                        
                    <img src="http://via.placeholder.com/200x200" class="img-thumbnail" alt="Cinque Terre">
                </figure>    
            </div>
            <div class="col-md-2">
                <figure class="imghvr-fold-up">
                    <figcaption class="text-center">
                        Hello                           
                    </figcaption>                        
                    <img src="http://via.placeholder.com/200x200" class="img-thumbnail" alt="Cinque Terre">
                </figure>    
            </div>
        </div>
    </div>

由于我使用Bootstrap v4，因此应根据页面自动调整。但这就是我所经历的......

See the image

Answer 1

您可以尝试在较小的屏幕mx-sm-auto上使用图片上的间隔类，有关这些内容的更多信息，请参阅此处：https://v4-alpha.getbootstrap.com/utilities/spacing/

Answer 2

将margin:auto和display: block添加到图片以使其居中

Fiddle

.img-thumbnail{margin:auto;display:block}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<div  class="container-fluid">          
        <div class="row ">
            <div class="col-md-2">
                <figure class="imghvr-fold-up">
                    <figcaption class="text-center">
                        Hello                           
                    </figcaption>                        
                    <img src="http://via.placeholder.com/200x200" class="img-thumbnail" alt="Cinque Terre">
                </figure>              
            </div>
            <div class="col-md-2">
                <figure class="imghvr-fold-up">
                    <figcaption class="text-center">
                        Hello                           
                    </figcaption>                        
                    <img src="http://via.placeholder.com/200x200" class="img-thumbnail" alt="Cinque Terre">
                </figure>    
            </div>
            <div class="col-md-2">
                <figure class="imghvr-fold-up">
                    <figcaption class="text-center">
                        Hello                           
                    </figcaption>                        
                    <img src="http://via.placeholder.com/200x200" class="img-thumbnail" alt="Cinque Terre">
                </figure>    
            </div>
            <div class="col-md-2">
                <figure class="imghvr-fold-up">
                    <figcaption class="text-center">
                        Hello                           
                    </figcaption>                        
                    <img src="http://via.placeholder.com/200x200" class="img-thumbnail" alt="Cinque Terre">
                </figure>    
            </div>
            <div class="col-md-2">
                <figure class="imghvr-fold-up">
                    <figcaption class="text-center">
                        Hello                           
                    </figcaption>                        
                    <img src="http://via.placeholder.com/200x200" class="img-thumbnail" alt="Cinque Terre">
                </figure>    
            </div>
            <div class="col-md-2">
                <figure class="imghvr-fold-up">
                    <figcaption class="text-center">
                        Hello                           
                    </figcaption>                        
                    <img src="http://via.placeholder.com/200x200" class="img-thumbnail" alt="Cinque Terre">
                </figure>    
            </div>
        </div>
    </div>

Answer 3

将display: inline-block;应用于img代码，然后将text-align: center;应用于父代;

在您的代码中，您已将display: block;应用于图片代码。现在图像充当被阻挡的元素。这就是为什么你的图像没有在中心对齐的原因。

我已为text-align: center;申请了imghvr-fold-up，因为我可以在一个点上处理字幕和图片。

<强>输出：

//CSS
.img-thumbnail {
  display: inline-block;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-fluid">
    <div class="row ">
        <div class="col-md-2 text-center">
            <figure class="imghvr-fold-up">
                <figcaption class="">
                    Hello
                </figcaption>
                <img src="http://via.placeholder.com/200x200" class="img-thumbnail" alt="Cinque Terre">
            </figure>
        </div>
        <div class="col-md-2">
            <figure class="imghvr-fold-up text-center">
                <figcaption class="">
                    Hello
                </figcaption>
                <img src="http://via.placeholder.com/200x200" class="img-thumbnail" alt="Cinque Terre">
            </figure>
        </div>
        <div class="col-md-2">
            <figure class="imghvr-fold-up text-center">
                <figcaption>
                    Hello
                </figcaption>
                <img src="http://via.placeholder.com/200x200" class="img-thumbnail" alt="Cinque Terre">
            </figure>
        </div>
        <div class="col-md-2">
            <figure class="imghvr-fold-up text-center">
                <figcaption>
                    Hello
                </figcaption>
                <img src="http://via.placeholder.com/200x200" class="img-thumbnail" alt="Cinque Terre">
            </figure>
        </div>
        <div class="col-md-2">
            <figure class="imghvr-fold-up text-center">
                <figcaption>
                    Hello
                </figcaption>
                <img src="http://via.placeholder.com/200x200" class="img-thumbnail" alt="Cinque Terre">
            </figure>
        </div>
        <div class="col-md-2">
            <figure class="imghvr-fold-up text-center">
                <figcaption>
                    Hello
                </figcaption>
                <img src="http://via.placeholder.com/200x200" class="img-thumbnail" alt="Cinque Terre">
            </figure>
        </div>
    </div>
</div>

codepen.

演示

如何在减少浏览器窗口时对齐Bootstrap图像（响应）

3 个答案: