Por lo tanto, tengo el div con estos parámetros:¿Cómo centrar la imagen con un tamaño desconocido dentro de div?
container {
position:fixed;
background-color: rgba(50,50,50,0.7);
width:100%;
height:100%;
display:none;}
Contiene la imagen con tamaño desconocido (el tamaño es dinámica y puede ser diferente).
Necesito alinear la imagen verticalmente y horizontalmente.
Por favor, ayudar a
El método de imagen de fondo va a funcionar, con background-position: Centro, por desgracia si no se pierden el control de la ampliación de la imagen.
Puede configurar su imagen de la siguiente manera:
position:absolute;
margin:auto;
top:0;
bottom:0;
left:0;
right:0;
PS. Tenga en cuenta que esto se centrará en su padre más cercano.
¡Gracias! Funciona :) – Oshibka404
Funciona para una imagen, pero no funciona para un DIV.Parece que requieren un ancho/alto de CSS codificado para centrarlo. Observe cómo si elimina el atributo de estilo y deja solo el ancho/alto HTML en el div, no se puede centrar. No, para la etiqueta img. ¿Por qué esta inconsistencia? https://jsfiddle.net/L1rk46xy/ – Triynko
perfecto. dinámica. –
La manera más fácil de cross-browser sería fijar su imagen dinámica como una propiedad básica sobre el #container:
<div id="container" style="background: url(path/to/image.png) no-repeat 50% 50%"></div>
Añadir el siguiente:
Los dos primeros las líneas se centran verticalmente, la última horizontalmente.
display: table-cell;
vertical-align: middle ;
text-align: center;
información más se puede encontrar aquí: http://www.w3.org/Style/Examples/007/center
Esto centrará verticalmente y horizontalmente.
#container {
text-align: center;
vertical-align: middle;
display: table-cell;
}
Creo que la forma más fácil es hacer esto:
.container img {
display:block;
margin:auto;
}
ajustar para adaptarse a su .container div (no estoy seguro si la suya era una clase o ID)
oh no he leído todos de tu pregunta.
esto parece funcionar:
<style type="text/css">
.wraptocenter {
display: table-cell;
text-align: center;
vertical-align: middle;
width: ...;
height: ...;
}
.wraptocenter * {
vertical-align: middle;
}
/*\*//*/
.wraptocenter {
display: block;
}
.wraptocenter span {
display: inline-block;
height: 100%;
width: 1px;
}
/**/
</style>
<!--[if lt IE 8]><style>
.wraptocenter span {
display: inline-block;
height: 100%;
}
</style><![endif]-->
crédito completo: http://www.brunildo.org/test/img_center.html
http://zoffix.com/new/absolute-center-random-width-height.html
Este es un ejemplo bastante decente. Usualmente usas table/vertical-align para navegadores modernos y posicionas +% s para IE.
Quizás su CSS tenga un error tipográfico, pero quiero asegurarme de que entienda que su selector de clase debe ir precedido de un punto, como en '.container {...}' – Robusto
Por supuesto, lo sé :) mi #container no es una clase, es id. – Oshibka404
Si se trata de una identificación, entonces debe comenzar con #, como lo hace en su comentario. Sólo digo. – Robusto