vertical - como centrar una imagen de fondo en html

Centrar la imagen horizontalmente dentro de un div

Question

Probablemente esta sea una pregunta estúpida, pero como las formas habituales de alineación central de una imagen no funcionan, pensé que lo haría. ¿Cómo puedo alinear en el centro (horizontalmente) una imagen dentro de su div contenedor?

Aquí está el HTML y CSS. También he incluido el CSS para los otros elementos de la miniatura. Se ejecuta en orden descendente, por lo que el elemento más alto es el contenedor de todo y el más bajo está dentro de todo.

#thumbnailwrapper {
color: #2A2A2A;
margin-right: 5px;
border-radius: 0.2em;
margin-bottom: 5px;
background-color: #E9F7FE;
padding: 5px;
border: thin solid #DADADA;
font-size: 15px
}
#artiststhumbnail {
width: 120px;
height: 108px;
overflow: hidden;
border: thin solid #DADADA;
background-color: white;
}
#artiststhumbnail:hover {
left: 50px
}

<!--link here-->
<a href="NotByDesign">
<div id="thumbnailwrapper">
<a href="NotByDesign">
<!--name here-->
<b>Not By Design</b>
<br>
<div id="artiststhumbnail">
<a href="NotByDesign">
<!--image here-->
<img src="../files/noprofile.jpg" height="100%" alt="Not By Design" border="1" />
</a>
</div>
<div id="genre">Punk</div>
</div>

De acuerdo, he agregado el marcado sin el PHP, así que debería ser más fácil de ver. Ninguna de las dos soluciones parece funcionar en la práctica. El texto en la parte superior e inferior no puede estar centrado y la imagen debe estar centrada dentro de su div contenedor. El contenedor tiene un desbordamiento oculto, por lo que quiero ver el centro de la imagen, ya que normalmente es donde se encuentra el foco.

Answer 1

Centrar una imagen en un div.

/* standar */
div, .flexbox-div {
position: relative;
width: 100%;
height: 100px;
margin: 10px;
background-color: grey;
}
img {
border: 3px solid red;
width: 75px;
height: 75px;
}
/* || standar */
/* transform */
.transform {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%); /* IE 9 */
-webkit-transform: translate(-50%, -50%); /* Chrome, Safari, Opera */
}
/* || transform */
/* flexbox margin */
.flexbox-div {
display: -webkit-flex;
display: flex;
background-color: lightgrey;
}
.margin-img {
margin: auto;
}
/* || flexbox margin */
/* flexbox justify align */
.flexbox-justify {
justify-content: center;
}
.align-item {
align-self: center;
}
/* || flexbox justify align */

<h4>Using transform </h4>
<div>
<img class="transform" src="http://placeholders.org/250/000/fff" alt="Not By Design" border="1" />
</div>
<h4>Using flexbox margin</h4>
<div class="flexbox-div">
<img class="margin-img" src="http://placeholders.org/250/000/fff" alt="Not By Design" border="1" />
</div>
<h4>Using flexbox justify align</h4>
<div class="flexbox-div flexbox-justify">
<img class="align-item" src="http://placeholders.org/250/000/fff" alt="Not By Design" border="1" />
</div>

Answer 2

Acabo de encontrar esta solución a continuación en la página W3 CSS y respondió a mi problema.

img {
display: block;
margin-left: auto;
margin-right: auto;
}

Fuente: http://www.w3.org/Style/Examples/007/center.en.html

Answer 3

Agrega esto a tu CSS

#artiststhumbnail,img {
margin-left:auto;
margin-right:auto;
}

Solo referenciando un elemento hijo que en ese caso es la imagen.

Answer 4

CSS flexbox puede hacerlo con flexbox justify-content: center en el elemento principal de la imagen.

HTML

<div class="image-container">
<img src="http://placehold.it/100x100" />
</div>

CSS

.image-container {
display: flex;
justify-content: center;
}

Salida:

body {
background: lightgray;
}
.image-container {
width: 200px;
display: flex;
justify-content: center;
margin: 10px;
padding: 10px;
/* Material design properties */
background: #fff;
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
}
.image-2 {
width: 500px;
}
.image-3 {
width: 300px;
}

<div class="image-container">
<img src="http://placehold.it/100x100" />
</div>
<div class="image-container image-2">
<img src="http://placehold.it/100x100/333" />
</div>
<div class="image-container image-3">
<img src="http://placehold.it/100x100/666" />
</div>

Answer 5

Coloque un relleno de píxeles iguales para la izquierda y la derecha:

<div id="artiststhumbnail" style="padding-left:ypx;padding-right:ypx">

Answer 6

Esto es lo que terminé haciendo:

<div style="height: 600px">
<img src="assets/zzzzz.png" alt="Error" style="max-width: 100%;
max-height: 100%; display:block; margin:auto;" />
</div>

Lo que limitará la altura de la imagen a 600 px y se centrará horizontalmente (o redimensionará si el ancho principal es más pequeño) al contenedor principal, manteniendo las proporciones.

Answer 7

Esto también lo haría.

#imagewrapper {
text-align:center
}
#imagewrapper img {
display:inline-block;
margin:0 5px
}

Answer 8

Lo mejor que he encontrado (que parece funcionar en todos los navegadores) para centrar una imagen, o cualquier elemento, horizontalmente es crear una clase CSS e incluir los siguientes parámetros:

CSS

.center {
position: relative; /* where the next element will be automatically positioned */
display: inline-block; /* causes element width to shrink to fit content */
left: 50%; /* moves left side of image/element to center of parent element */
transform: translate(-50%); /* centers image/element on "left: 50%" position */
}

Luego puede aplicar la clase CSS que creó a su etiqueta de la siguiente manera:

HTML

<img class="center" src="image.jpg" />

También puede integrar el CSS en su (s) elemento (s) haciendo lo siguiente:

<img style="position: relative; display: inline-block; left: 50%; transform: translate(-50%);" src ="image.jpg" />

... pero no recomendaría escribir CSS en línea porque entonces tiene que hacer múltiples cambios en todas sus etiquetas usando su código de centrado CSS si alguna vez desea cambiar el estilo.

Answer 9

Para centrar una imagen horizontalmente esto funciona.

<p style="text-align:center"><img src=""></p>

Answer 10

Pon la imagen dentro de un newDiv . Haz que el ancho del div contiene sea el mismo que el de la imagen. Aplicar margin: 0 auto; al newDiv . Eso debería centrar el div dentro del contenedor.

Answer 11

Puedes alinear tu contenido usando flex box con un código mínimo

HTML

<div class="image-container">
<img src="https://image.freepik.com/free-vector/modern-abstract-background_1048-1003.jpg" width="100px">
</div>

CSS

.image-container{
width:100%;
background:green;
display:flex;

.image-container{
width:100%;
background:green;
display:flex;
justify-content: center;
align-items:center;
}

<div class="image-container">
<img src="https://image.freepik.com/free-vector/modern-abstract-background_1048-1003.jpg" width="100px">
</div>

js fiddle link https://jsfiddle.net/7un6ku2m/

Answer 12

Si tiene que hacer esto en línea (como cuando usa un cuadro de entrada),
Aquí hay un truco rápido que funcionó para mí: rodear su (enlace de imagen en este caso)
en un div con style="text-align:center"

<div style="text-align:center">
<a title="Example Image: Google Logo" href="https://www.google.com/"
target="_blank" rel="noopener"><img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" alt="Google Logo. Click to visit Google.com" border="0" data-recalc-dims="1" /></a>
<h6><strong>This text will also be centered </strong></h6>
</div> /* ends centering style */

Answer 13

Utilizar posicionamiento. Lo siguiente funcionó para mí ... (Centrado horizontal y verticalmente)

Con zoom al centro de la imagen (la imagen llena el div):

div{
display:block;
overflow:hidden;
width: 70px;
height: 70px;
position: relative;
}
div img{
min-width: 70px;
min-height: 70px;
max-width: 250%;
max-height: 250%;
top: -50%;
left: -50%;
bottom: -50%;
right: -50%;
position: absolute;
}

Sin acercar el zoom al centro de la imagen (la imagen no llena el div):

 div{
display:block;
overflow:hidden;
width: 100px;
height: 100px;
position: relative;
}
div img{
width: 70px;
height: 70px;
top: 50%;
left: 50%;
bottom: 50%;
right: 50%;
position: absolute;
}

Answer 14

Voy a aventurarme y decir que lo que está buscando es lo siguiente.

Tenga en cuenta que creo que se omitió accidentalmente lo siguiente en la pregunta (vea el comentario):

<div id="thumbnailwrapper"> <!-- <<< This opening element -->
<div id="artiststhumbnail">
...

Así que lo que necesitas es:

#artiststhumbnail {
width:120px;
height:108px;
margin: 0 auto; /* <<< This line here. */
...
}

http://jsfiddle.net/userdude/XStjX/3/

Answer 15

El CSS Guy sugiere lo siguiente:

Entonces, traduciendo, tal vez:

#artiststhumbnail a img {
display:block;
margin:auto;
}

Aquí está mi solución en: http://jsfiddle.net/marvo/3k3CC/2/

Answer 16

##Both Vertically and Horizontally center of the Page
.box{
width: 300px;
height: 300px;
background-color: #232532;
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}

Answer 17

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body{
/*-------------------important for fluid images---//--*/
overflow-x: hidden; /* some browsers shows it for mysterious reasons to me*/
overflow-y: scroll;
margin-left:0px;
margin-top:0px;
/*-------------------important for fluid images---//--*/
}
.thirddiv{
float:left;
width:100vw;
height:100vh;
margin:0px;
background:olive;
}
.thirdclassclassone{
float:left; /*important*/
background:grey;
width:80vw;
height:80vh; /*match with img height bellow*/
margin-left:10vw; /* 100vw minus "width"/2 */
margin-right:10vw; /* 100vw minus "width"/2 */
margin-top:10vh;
}
.thirdclassclassone img{
position:relative; /*important*/
display: block; /*important*/
margin-left: auto; /*very important*/
margin-right: auto; /*very important*/
height:80vh; /*match with parent div above*/
/*--------------------------------
margin-top:5vh;
margin-bottom:5vh;
---------------------------------*/
/*---------------------set margins to match total height of parent di----------------------------------------*/
}
</style>
</head>
<body>
<div class="thirddiv">
<div class="thirdclassclassone">
<img src="ireland.png">
</div>
</body>
</html>