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

查看：63
本文介绍了如何在 Bootstrap 中将图像居中?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

感谢帮助.

<div class="row"><div class="col-4 mx-auto"><img class=""...><!-- 该图像在列中居中--><表格...><p...><p...><p...>

解决方案

图片默认显示为 inline-block，您需要将其显示为 block 以使用 .mx-auto.这可以通过内置的 .d-block 来完成:

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

或者将其保留为 inline-block 并使用 .text-center 将其包裹在一个 div 中:

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

我做了一个 fiddle 展示了两种方式.它们也被记录在此处.

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.

Help is appreciated.

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

解决方案

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>

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

查看全文
相关文章
其他开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆