vertical - centrar texto css
¿Cómo alinear verticalmente una imagen dentro de un div? (30)
Pregunta
¿Cómo puedes alinear una imagen dentro de un div contiene?
Ejemplo
En mi ejemplo, necesito centrar verticalmente <img> en <div> con class ="frame ":
<div class="frame" style="height: 25px;">
<img src="http://jsfiddle.net/img/logo.png" />
</div>
La altura de .frame es fija y la altura de la imagen es desconocida. Puedo agregar nuevos elementos en .frame si esa es la única solución. Estoy tratando de hacer esto en IE≥7, Webkit, Gecko.
Ver el jsfiddle here
.frame {
height: 25px; /* equals max image height */
line-height: 25px;
width: 160px;
border: 1px solid red;
text-align: center; margin: 1em 0;
}
img {
background: #3A6F9A;
vertical-align: middle;
max-height: 25px;
max-width: 160px;
}
<div class=frame>
<img src="http://jsfiddle.net/img/logo.png" height=250 />
</div>
<div class=frame>
<img src="http://jsfiddle.net/img/logo.png" height=25 />
</div>
<div class=frame>
<img src="http://jsfiddle.net/img/logo.png" height=23 />
</div>
<div class=frame>
<img src="http://jsfiddle.net/img/logo.png" height=21 />
</div>
<div class=frame>
<img src="http://jsfiddle.net/img/logo.png" height=19 />
</div>
<div class=frame>
<img src="http://jsfiddle.net/img/logo.png" height=17 />
</div>
<div class=frame>
<img src="http://jsfiddle.net/img/logo.png" height=15 />
</div>
<div class=frame>
<img src="http://jsfiddle.net/img/logo.png" height=13 />
</div>
<div class=frame>
<img src="http://jsfiddle.net/img/logo.png" height=11 />
</div>
<div class=frame>
<img src="http://jsfiddle.net/img/logo.png" height=9 />
</div>
<div class=frame>
<img src="http://jsfiddle.net/img/logo.png" height=7 />
</div>
<div class=frame>
<img src="http://jsfiddle.net/img/logo.png" height=5 />
</div>
<div class=frame>
<img src="http://jsfiddle.net/img/logo.png" height=3 />
</div>
SOLUCIÓN UTILIZANDO TABLA Y TABLA CELULAR
A veces debería resolverse mostrando como table / table-cell. Por ejemplo, una pantalla de título rápido. Es una forma recomendada por W3 también. Te recomiendo que revises este enlace llamado Centrar las cosas de W3C.org
Los consejos utilizados aquí son:
- Contenedor de posicionamiento absoluto mostrado como tabla
- Vertical alineado para centrar el contenido mostrado como tabla-celda
.container {
position:absolute;
display:table;
width:100%;
height:100%;
}
.content {
display:table-cell;
vertical-align:middle;
}
<div class="container">
<div class="content">
<h1 style="text-align:center"> PEACE IN THE WORLD </h1>
</div>
</div>
Personalmente no estoy de acuerdo en usar ayudantes para este propósito
¡Hay una solución súper fácil con flexbox!
.frame {
display: flex;
align-items: center;
}
¿Quieres alinear una imagen que tiene después de un texto / título y ambos están dentro de un div?
Ver en JSfiddle o Ejecutar JSfiddle Código.
Solo asegúrese de tener una ID o una clase en todos sus elementos (div, img, title, etc.).
Para mí, esta solución funciona en todos los navegadores (para dispositivos móviles, debe adaptar su código con: @media).
h2.h2red {
color: red;
font-size: 14px;
}
.mydivclass {
margin-top: 30px;
display: block;
}
img.mydesiredclass {
margin-right: 10px;
display: block;
float: left;/*If you want to allign the text with an image on the same row*/
width: 100px;
heght: 100px;
margin-top: -40px/*Change this value to adapt to your page*/;
}
<div class="mydivclass">
<br />
<img class="mydesiredclass" src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b3/Wikipedia-logo-v2-en.svg/2000px-Wikipedia-logo-v2-en.svg.png">
<h2 class="h2red">Text alligned after image inside a div by negative manipulate the img postion</h2>
</div>
¿que tal este?
position: absolute;
top: calc(50% - 0.5em);
left: calc(50% - 0.5em);
line-height: 1em;
y puedes variar font-size
Además, puedes usar Flexbox para lograr el resultado correcto:
.parent {
align-items: center; /* for vertical align */
background: red;
display: flex;
height: 250px;
/* justify-content: center; <- for horizontal align */
width: 250px;
}
<div class="parent">
<img class="child" src="https://cdn2.iconfinder.com/data/icons/social-icons-circular-black/512/-128.png" />
</div>
De esta manera puedes centrar una imagen verticalmente ( demo ):
div{
height:150px; //IE7fix
line-height: 150px;
}
img{
vertical-align: middle;
margin-bottom:0.25em;
}
El único (y el mejor navegador cruzado) que conozco es usar un ayudante de inline-block con height: 100% y vertical-align: middle en ambos elementos.
Así que hay una solución: http://jsfiddle.net/kizu/4RPFa/4570/
.frame {
height: 25px; /* equals max image height */
width: 160px;
border: 1px solid red;
white-space: nowrap; /* this is required unless you put the helper span closely near the img */
text-align: center; margin: 1em 0;
}
.helper {
display: inline-block;
height: 100%;
vertical-align: middle;
}
img {
background: #3A6F9A;
vertical-align: middle;
max-height: 25px;
max-width: 160px;
}
<div class="frame">
<span class="helper"></span><img src="http://jsfiddle.net/img/logo.png" height=250px />
</div>
<div class="frame">
<span class="helper"></span><img src="http://jsfiddle.net/img/logo.png" height=25px />
</div>
<div class="frame">
<span class="helper"></span><img src="http://jsfiddle.net/img/logo.png" height=23px />
</div>
<div class="frame">
<span class="helper"></span><img src="http://jsfiddle.net/img/logo.png" height=21px />
</div>
<div class="frame">
<span class="helper"></span><img src="http://jsfiddle.net/img/logo.png" height=19px />
</div>
<div class="frame">
<span class="helper"></span>
<img src="http://jsfiddle.net/img/logo.png" height=17px />
</div>
<div class="frame">
<span class="helper"></span>
<img src="http://jsfiddle.net/img/logo.png" height=15px />
</div>
<div class="frame">
<span class="helper"></span>
<img src="http://jsfiddle.net/img/logo.png" height=13px />
</div>
<div class="frame">
<span class="helper"></span>
<img src="http://jsfiddle.net/img/logo.png" height=11px />
</div>
<div class="frame">
<span class="helper"></span>
<img src="http://jsfiddle.net/img/logo.png" height=9px />
</div>
<div class="frame">
<span class="helper"></span>
<img src="http://jsfiddle.net/img/logo.png" height=7px />
</div>
<div class="frame">
<span class="helper"></span>
<img src="http://jsfiddle.net/img/logo.png" height=5px />
</div>
<div class="frame">
<span class="helper"></span>
<img src="http://jsfiddle.net/img/logo.png" height=3px />
</div>
O, si no quiere tener un elemento adicional en los navegadores modernos y no le importa usar expresiones de IE, puede usar un pseudo-elemento y agregarlo a IE usando una expresión conveniente, que se ejecuta solo una vez por elemento, por lo que no habrá problemas de rendimiento:
La solución con :before y expression() para IE: http://jsfiddle.net/kizu/4RPFa/4571/
.frame {
height: 25px; /* equals max image height */
width: 160px;
border: 1px solid red;
white-space: nowrap;
text-align: center; margin: 1em 0;
}
.frame:before,
.frame_before {
content: "";
display: inline-block;
height: 100%;
vertical-align: middle;
}
img {
background: #3A6F9A;
vertical-align: middle;
max-height: 25px;
max-width: 160px;
}
/* Move this to conditional comments */
.frame {
list-style:none;
behavior: expression(
function(t){
t.insertAdjacentHTML(''afterBegin'',''<span class="frame_before"></span>'');
t.runtimeStyle.behavior = ''none'';
}(this)
);
}
<div class="frame"><img src="http://jsfiddle.net/img/logo.png" height=250px /></div>
<div class="frame"><img src="http://jsfiddle.net/img/logo.png" height=25px /></div>
<div class="frame"><img src="http://jsfiddle.net/img/logo.png" height=23px /></div>
<div class="frame"><img src="http://jsfiddle.net/img/logo.png" height=21px /></div>
<div class="frame"><img src="http://jsfiddle.net/img/logo.png" height=19px /></div>
<div class="frame"><img src="http://jsfiddle.net/img/logo.png" height=17px /></div>
<div class="frame"><img src="http://jsfiddle.net/img/logo.png" height=15px /></div>
<div class="frame"><img src="http://jsfiddle.net/img/logo.png" height=13px /></div>
<div class="frame"><img src="http://jsfiddle.net/img/logo.png" height=11px /></div>
<div class="frame"><img src="http://jsfiddle.net/img/logo.png" height=9px /></div>
<div class="frame"><img src="http://jsfiddle.net/img/logo.png" height=7px /></div>
<div class="frame"><img src="http://jsfiddle.net/img/logo.png" height=5px /></div>
<div class="frame"><img src="http://jsfiddle.net/img/logo.png" height=3px /></div>
Cómo funciona:
Cuando tienes dos elementos de
inline-blockcerca uno del otro, puedes alinearlos cada uno al lado del otro, así que convertical-align: middleobtendrás algo como esto:Cuando tiene un bloque con altura fija (en
px,emu otra unidad absoluta), puede establecer la altura de los bloques internos en%.- Entonces, agregar un
inline-blockconheight: 100%en un bloque con altura fija alinearía otro elemento deinline-blockeninline-blocken él (<img/>en su caso) verticalmente cerca de él.
El uso de la table y table-cell método de table-cell hacen el trabajo, especialmente porque también tiene como objetivo algunos navegadores antiguos, creo un fragmento para que pueda ejecutarlo y verifique el resultado:
.wrapper {
position: relative;
display: table;
width: 300px;
height: 200px;
}
.inside {
vertical-align: middle;
display: table-cell;
}
<div class="wrapper">
<div class="inside">
<p>Centre me please!!!</p>
</div>
<div class="inside">
<img src="https://cdn2.iconfinder.com/data/icons/social-icons-circular-black/512/-128.png" />
</div>
</div>
El viejo enlace de JSFiddle que publiqué aquí ya no funciona, esa es probablemente la razón para el voto negativo. Solo por ser una respuesta válida, todavía quiero volver a publicar la solución jQuery. Esto funciona para cada elemento que tiene aplicada la clase v_align . Se centrará verticalmente en el elemento principal y, al cambiar el tamaño de la ventana, se volverá a calcular.
$(document).ready(function() {
// define the class that vertial aligns stuff
var objects = ''.v_align'';
// initial setup
verticalAlign(objects);
// register resize event listener
$(window).resize(function() {
verticalAlign(objects);
});
});
function verticalAlign(selector) {
$(selector).each(function(val) {
var parent_height = $(this).parent().height();
var dif = parent_height - $(this).height()
// should only work if the parent is larger than the element
var margin_top = dif > 0 ? dif/2 : 0;
$(this).css("margin-top", margin_top + "px");
});
}
Esto funciona para navegadores modernos (2016 en el momento de la edición) como se muestra en esta demostración en codepen.
.frame {
height: 25px;
line-height: 25px;
width: 160px;
border: 1px solid #83A7D3;
}
.frame img {
background: #3A6F9A;
display:inline-block;
vertical-align: middle;
}
Es muy importante que asigne una clase a las imágenes o use la herencia para apuntar a las imágenes que necesita centradas. En este ejemplo, usamos .frame img {} modo que solo las imágenes envueltas por un div con una clase de .frame serían dirigidas.
Esto podría ser útil:
div {
position:relative;
width:200px;
height:200px;
}
img {
position:absolute;
top:0;
bottom:0;
margin:auto;
}
.image {
min-height:50px
}
Referencia: http://www.student.oulu.fi/~laurirai/www/css/middle/
He estado jugando con el uso de relleno para la alineación central. Necesitará definir el tamaño del contenedor externo de nivel superior, pero el contenedor interno debería redimensionarse, y puede configurar el relleno en diferentes valores porcentuales.
<div class=''container''>
<img src=''image.jpg'' />
</div>
.container {
padding: 20%;
background-color: blue;
}
img {
width: 100%;
}
La mejor solución es que
.block{
/* decor */
padding:0 20px;
background:#666;
border:2px solid #fff;
text-align:center;
/* important */
min-height:220px;
width:260px;
white-space:nowrap;
}
.block:after{
content:'''';
display:inline-block;
height:220px; /* the same as min-height */
width:1px;
overflow:hidden;
margin:0 0 0 -5px;
vertical-align:middle;
}
.block span{
vertical-align:middle;
display:inline-block;
white-space:normal;
}
Mi solución: http://jsfiddle.net/XNAj6/2/
<div class="container">
<div class="frame">
<img src="http://jsfiddle.net/img/logo.png" class="img" alt="" />
</div>
</div>
.container {
display: table;
float: left;
border: solid black 1px;
margin: 2px;
padding: 0;
background-color: black;
width: 150px;
height: 150px;
}
.frame {
display: table-cell;
text-align: center;
vertical-align: middle;
border-width: 0;
}
.img {
max-width: 150px;
max-height: 150px;
vertical-align: middle;
}
No estoy seguro acerca de IE, pero bajo Firefox y Chrome, si tienes un img en un contenedor div , el siguiente css debería funcionar. Al menos para mi funciona bien:
div.img-container {
display:table-cell;
vertical-align: middle;
height: 450px;
width: 490px;
}
div.img-container img {
max-height: 450px;
max-width: 490px;
}
Para aquellos que aterrizaron en esta publicación y están interesados en una solución más moderna, y que no tienen la necesidad de admitir navegadores heredados, puede hacer esto:
.frame {
display: flex;
/*Uncomment below to center horizontally*/
/*justify-content: center;*/
align-items: center;
}
img {
height: auto;
}
/* Styling stuff not needed for demo */
.frame {
max-width: 900px;
height: 200px;
margin: auto;
background: #222;
}
p {
max-width: 900px;
margin: 20px auto 0;
}
img {
width: 150px;
}
<div class="frame">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/9988/hand-pointing.png">
</div>
Aquí hay una pluma: http://codepen.io/ricardozea/pen/aa0ee8e6021087b6e2460664a0fa3f3e
Para centrar una imagen dentro de un contenedor (podría ser un logotipo) además de un texto como este:
Básicamente envuelves la imagen.
.outer-frame {
border: 1px solid red;
min-height: 200px;
text-align: center; //only for align horizontally
}
.wrapper{
line-height: 200px;
border: 2px dashed blue;
border-radius: 20px;
margin: 50px
}
img {
//height: auto;
vertical-align: middle;
}
<div class="outer-frame">
<div class="wrapper">
some text
<img src="http://via.placeholder.com/150x150">
</div>
</div>
Podrías hacer esto:
manifestación
CSS
.frame {
height: 25px; /* equals max image height */
line-height: 25px;
width: 160px;
border: 1px solid red;
text-align: center; margin: 1em 0;
position: relative; /* Changes here... */
}
img {
background: #3A6F9A;
max-height: 25px;
max-width: 160px;
top: 50%; /* here.. */
left: 50%; /* here... */
position: absolute; /* and here */
}
javascript
$("img").each(function(){
this.style.marginTop = $(this).height() / -2 + "px";
})
Pruebe esta solución con css puro http://jsfiddle.net/sandeep/4RPFa/72/ Puede ser el principal problema con su html. No utilice comillas cuando defina la image height y la image height en su html.
CSS:
.frame {
height: 25px; /* equals max image height */
width: 160px;
border: 1px solid red;
position:relative;
margin: 1em 0;
top: 50%;
text-align: center;
line-height: 24px;
margin-bottom:20px;
}
img {
background: #3A6F9A;
vertical-align: middle;
line-height:0;
margin:0 auto;
max-height:25px;
}
EDITAR:
Cuando trabajo con la etiqueta img , deja espacio de 3px to 2px desde top . Ahora disminuyo line-height y es trabajo. css:
.frame {
height: 25px; /* equals max image height */
width: 160px;
border: 1px solid red;
margin: 1em 0;
text-align: center;
line-height:22px;
*:first-child+html line-height:24px; /* for IE7 */
}
img {
background: #3A6F9A;
vertical-align: middle;
line-height:0;
max-height:25px;
max-width:160px;
}
@media screen and (-webkit-min-device-pixel-ratio:0) {
.frame {
line-height:20px; /* webkit browsers */
}
La propiedad de line-height se render diferente en diferentes navegadores. Asi que; Tenemos que definir diferentes navegadores de propiedad de line-height
Compruebe este ejemplo http://jsfiddle.net/sandeep/4be8t/11/
Verifique este ejemplo acerca line-height diferente en diferentes navegadores, diferencias de altura de entrada en Firefox y Chrome
Puedes intentar configurar el CSS de PI para display: table-cell; vertical-align: middle; display: table-cell; vertical-align: middle;
Puedes probar el siguiente código
.frame{
display:flex;
justify-content: center;
align-items: center;
width:100%;
}
<div class="frame" style="height: 25px;">
<img src="http://jsfiddle.net/img/logo.png" />
</div>
Si puede vivir con márgenes de tamaño de píxel, simplemente agregue font-size: 1px; a la .frame . Pero recuerde que ahora en el .frame 1em = 1px, lo que significa que también debe establecer el margen en píxeles.
http://jsfiddle.net/feeela/4RPFa/96/
EDIT: ahora ya no esta centrado en Opera ...
Solución de 3 líneas:
position: relative;
top: 50%;
transform: translateY(-50%);
Esto se aplica a cualquier cosa.
Desde here
Una manera fácil que funciona para mí:
img {
vertical-align: middle;
display: inline-block;
position: relative;
}
Funciona para Google Chrome muy bien. Prueba este en otro navegador.
Una solución CSS pura:
El CSS:
.frame {
margin: 1em 0;
height: 35px;
width: 160px;
border: 1px solid red;
position: relative;
}
img {
max-height: 25px;
max-width: 160px;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
background: #3A6F9A;
}
Cosas clave
// position: relative; - in .frame holds the absolute element within the frame
// top: 0; bottom: 0; left: 0; right: 0; - this is key for centering a component
// margin: auto; - centers the image horizontally & vertically
Yo tuve el mismo problema. Esto funciona para mí:
<style type="text/css">
div.parent {
position: relative;
}
img.child {
bottom: 0;
left: 0;
margin: auto;
position: absolute;
right: 0;
top: 0;
}
</style>
<div class="parent">
<img class="child">
</div>
puedes usar esto:
.loaderimage {
position: absolute;
top: 50%;
left: 50%;
width: 60px;
height: 60px;
margin-top: -30px;/*50% of the height*/
margin-left: -30px;
}
.frame {
height: 35px; /* equals max image height */
width: 160px;
border: 1px solid red;
text-align: center;
margin: 1em 0;
display: table-cell;
vertical-align: middle;
}
img {
background: #3A6F9A;
display: block;
max-height: 35px;
max-width: 160px;
}
La propiedad clave es display: table-cell; para .frame. Div.frame se muestra en línea con esto, por lo que necesita envolverlo en un elemento de bloque.
Esto funciona en FF, Opera, Chrome, Safari e IE8 +.
ACTUALIZAR
Para IE7 necesitamos agregar una expresión css:
*:first-child+html img {
position: relative;
top: expression((this.parentNode.clientHeight-this.clientHeight)/2+"px");
}
La solución de matejkramny es un buen comienzo, pero las imágenes de gran tamaño tienen una proporción incorrecta.
Aquí está mi tenedor:
demostración: https://jsbin.com/lidebapomi/edit?html,css,output
HTML:<div class="frame">
<img src="foo"/>
</div>
CSS:
.frame {
height: 160px; /*can be anything*/
width: 160px; /*can be anything*/
position: relative;
}
img {
max-height: 100%;
max-width: 100%;
width: auto;
height: auto;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
Solución de imagen de fondo .frame el elemento de imagen todos juntos y lo configuré como fondo del div con una clase de .frame
esto al menos funciona bien en IE8, FF6 y Chrome13
Lo verifiqué, esta solución no funcionará para reducir imágenes de más de 25px de altura. Hay una propiedad llamada background-size que establece el tamaño del elemento, pero es CSS3 que entraría en conflicto con el requisito de IE7.
Le aconsejaría que rehaga las prioridades de su navegador y diseñe los mejores navegadores disponibles, u obtenga un código de servidor para cambiar el tamaño de las imágenes si desea usar esta solución.