我正在努力仅使用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中居中放置图像?
发布评论