我正在努力只用Bootstrap'的CSS类来居中处理一张图片。我已经尝试了几种方法。一个是在img
元素上添加Bootstrap的CSS类mx-auto
,但没有任何作用。
希望得到帮助。
<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>
图片默认显示为inline-block,你需要将其显示为block,以便用.mx-auto
将其居中。这可以通过内置的".d-block "来完成:
<div class="container">
<div class="row">
<div class="col-4">
<img class="mx-auto d-block" src="...">
</div>
</div>
</div>
或者将其保留为inline-block,并用`.text-center'将其包裹在一个div中:
<div class="container">
<div class="row">
<div class="col-4">
<div class="text-center">
<img src="...">
</div>
</div>
</div>
</div>
我做了一个[fiddle][1],展示了两种方法。 它们也被记录在这里。
由于img是一个内联元素,只需在它的容器上使用text-center
。使用mx-auto
也会使容器(列)居中。
<div class="row">
<div class="col-4 mx-auto text-center">
<img src="..">
</div>
</div>
如果你只想让图片居中(而不是其他列的内容),请使用d-block
类使图片display:block
,然后mx-auto
就可以了。
<div class="row">
<div class="col-4">
<img class="mx-auto d-block" src="..">
</div>
</div>
img
是一个内联元素,text-center
使内联元素在其容器的中心对齐,如果该容器是一个block
元素。<! -- begin snippet: js hide: false console: true babel: false -->;
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css" rel="stylesheet"/>
<div class="container mt-5">
<div class="row">
<div class="col text-center">
<img src="https://upload.wikimedia.org/wikipedia/en/8/80/Wikipedia-logo-v2.svg" alt="" class="img-fluid">
</div>
</div>
</div>