如何在Bootstrap中居中放置图像? [英] How can I center an image in Bootstrap?

问题描述

我正在努力仅使用Bootstrap的CSS类来使图像居中.我已经尝试了几件事.一种是在img元素中添加Bootstrap CSS类mx-auto，但是它什么也没做.

I am struggling to center an image using only Bootstrap's CSS-classes. I already tried several things. One was adding Bootstrap CSS-class mx-auto to the img element, but it does nothing.

感谢您的帮助.

<div class="container">
    <div class="row">
        <div class="col-4 mx-auto">
            <img class=""...> <!-- center this image within the column -->

            <form...>

            <p...>
            <p...>
            <p...>                
        </div>
    </div>
</div>

推荐答案

默认情况下，图像显示为行内块，您需要将其显示为块，以使其与.mx-auto居中.这可以通过内置的.d-block:

Image by default is displayed as inline-block, you need to display it as block in order to center it with .mx-auto. This can be done with built-in .d-block:

<div class="container">
    <div class="row">
        <div class="col-4">
            <img class="mx-auto d-block" src="...">  
        </div>
    </div>
</div>

或者将其保留为内联块，并使用.text-center将其包装在div中:

Or leave it as inline-block and wrapped it in a div with .text-center:

<div class="container">
    <div class="row">
        <div class="col-4">
          <div class="text-center">
            <img src="..."> 
          </div>     
        </div>
    </div>
</div>

我制作了小提琴，同时显示了两种方式. 此处也有记录.

I made a fiddle showing both ways. They are documented here as well.

这篇关于如何在Bootstrap中居中放置图像?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！