tag - insertar imagen html url
Imagen receptiva alinear el centro de arranque 3 (15)
Puedes arreglarlo definiendo margen: 0 auto
o puedes usar col-md-offset también
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<style>
.img-responsive{
margin:0 auto;
}
</style>
<body>
<div class="container">
<h2>Image</h2>
<div class="row">
<div class="col-md-12">
<p>The .img-responsive class makes the image scale nicely to the parent element (resize the browser window to see the effect):</p>
<img src="http://www.w3schools.com/bootstrap/cinqueterre.jpg" class="img-responsive" alt="Cinque Terre" width="304" height="236">
</div>
</div>
</div>
</body>
</html>
Hago un catálogo con Bootstrap 3. Cuando se muestran en tabletas, las imágenes del producto se ven feas debido a su pequeño tamaño (500x500) y un ancho de 767 píxeles en el navegador. Quiero poner la imagen en el centro de la pantalla, pero por alguna razón no puedo. ¿Quién será ayudará a resolver el problema?
Aún puede trabajar con img-responsive sin afectar otras imágenes con esta clase de estilo.
Puede preceder esta etiqueta con la sección id / div id / class para definir un orden dentro del cual este img está anidado. Esta costumbre img-responsive funcionará solo en esa área.
Supongamos que tiene un área HTML definida como:
<section id="work">
<div class="container">
<div class="row">
<img class="img-responsive" src="some_image.jpg">
</div>
</div>
</section>
Entonces, tu CSS puede ser:
section#work .img-responsive{
margin: 0 auto;
}
Nota: esta respuesta se relaciona con el impacto potencial de alterar img-responsive en su totalidad. Por supuesto, center-block es la solución más simple.
Agregue solo el center-block clase a una imagen, esto también funciona con Bootstrap 4:
<img src="..." alt="..." class="center-block" />
Nota: center-block funciona incluso cuando se usa img-responsive
Esto debería centrar la imagen y hacerla receptiva.
<img src="..." class="img-responsive" style="margin:0 auto;"/>
Hasta ahora, la mejor solución para aceptar parece ser <img class="center-block" ... /> . Pero nadie ha mencionado cómo funciona el center-block .
Tome Bootstrap v3.3.6 por ejemplo:
.center-block {
display: block;
margin-right: auto;
margin-left: auto;
}
El valor predeterminado de dispaly para <img> está en inline . El block valor mostrará un elemento como un elemento de bloque (como <p> ). Comienza en una nueva línea y ocupa todo el ancho. De esta manera, las dos configuraciones de margen permiten que la imagen permanezca en el centro horizontalmente.
Hay .center-block clase de .center-block en Twitter Bootstrap 3 ( Since v3.0.1 ), así que usa:
<img src="..." alt="..." class="img-responsive center-block" />
La forma más exacta aplicada a todos los objetos de Booostrap usando clases estándar solo sería no establecer los márgenes superior e inferior (ya que la imagen puede heredarlos de su padre), por lo que siempre estoy usando:
.text-center .img-responsive {
margin-left: auto;
margin-right: auto;
}
También he hecho un Gist para eso, así que si algún cambio se aplicará debido a algún error, la versión de actualización siempre estará aquí: https://gist.github.com/jdrda/09a38bf152dd6a8aff4151c58679cc66
Para agregar a las respuestas ya dadas, tener img-responsive en combinación con img-thumbnail configurará display: block to display: inline block .
Prueba esto:
.img-responsive{
display: block;
height: auto;
max-width: 100%;
margin:0 auto;
}
.Image{
background:#ccc;
padding:30px;
}
<div class="Image">
<img src="http://minisoft.com.bd/uploads/ourteam/rafiq.jpg" class="img-responsive" title="Rafique" alt="Rafique">
</div>
Pruebe este código, también funcionará con iconos pequeños con bootstrap 4 porque no hay una clase de bloque central, bootstrap 4, así que pruebe este método, que será útil. Puede cambiar la posición de la imagen configurando .col-md-12 a .col-md-8 o .col-md-4 , .col-md-4 usted.
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="text-xs-center text-lg-center">
<img src="" class="img-thumbnail">
</div>
</div>
</div>
</div>
Solo use la clase .text-center si está usando Bootstrap 3.
<div class="text-center">
<img src="..." alt="..."/>
</div>
Nota: esto no funciona con img-responsive
Sugeriría una clasificación más "abstracta". Agregue una nueva clase "img-center" que se puede usar en combinación con la clase .img-responsive:
// Center responsive images
.img-responsive.img-center {
margin: 0 auto;
}
Si está utilizando Bootstrap v3.0.1 o superior, debería usar esta solución en su lugar. No anula los estilos de Bootstrap con CSS personalizado, sino que utiliza una función Bootstrap.
Mi respuesta original se muestra a continuación para la posteridad.
Esta es una solución agradablemente fácil. Debido a que .img-responsive from Bootstrap ya establece display: block , puede usar el margin: 0 auto para centrar la imagen:
.product .img-responsive {
margin: 0 auto;
}
<div class="col-md-12 text-center">
<img class="img-responsive tocenter" />
</div>
.
<style>
.tocenter {
margin:0 auto;
display: inline;
}
</style>
@media (max-width: 767px) {
img {
display: table;
margin: 0 auto;
}
}