Estoy luchando para centrar una imagen utilizando sólo Bootstrap's CSS-clases. Ya he probado varias cosas. Uno fue la adición de Bootstrap CSS-clase mx-auto
al elemento img
, pero no hace nada.
Se agradece la ayuda.
<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>
La imagen por defecto se muestra como inline-block, necesitas mostrarla como bloque para poder centrarla con .mx-auto
. Esto se puede hacer con .d-block
incorporado:
<div class="container">
<div class="row">
<div class="col-4">
<img class="mx-auto d-block" src="...">
</div>
</div>
</div>
O dejarlo como inline-block y envolverlo en un div con .text-center
:
<div class="container">
<div class="row">
<div class="col-4">
<div class="text-center">
<img src="...">
</div>
</div>
</div>
</div>
Hice un [fiddle][1] mostrando ambas formas. Están documentados aquí también.
Dado que el img es un elemento en línea, sólo tiene que utilizar text-center
en it's contenedor. Usando mx-auto
se centrará el contenedor (columna) también.
<div class="row">
<div class="col-4 mx-auto text-center">
<img src="..">
</div>
</div>
Si sólo quieres centrar la imagen (y no el contenido de la columna), haz que la imagen sea display:block
usando la clase d-block
, y entonces mx-auto
funcionará.
<div class="row">
<div class="col-4">
<img class="mx-auto d-block" src="..">
</div>
</div>
img
en el centro de su padre.img
es un elemento en línea, text-center
alinea elementos en línea en el centro de su contenedor si el contenedor es un elemento 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>
mx-auto
centra los elementos block
. Para ello, cambia display
del img de inline
a block
con la clase d-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">
<img src="https://upload.wikimedia.org/wikipedia/en/8/80/Wikipedia-logo-v2.svg" alt="" class="img-fluid d-block mx-auto">
</div>
</div>
</div>
d-flex
y justify-content-center
en su padre.<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 d-flex justify-content-center">
<img src="https://upload.wikimedia.org/wikipedia/en/8/80/Wikipedia-logo-v2.svg" alt="" class="img-fluid">
</div>
</div>
</div>