¿Por qué no vertical-align: middle
funciona? Y, sin embargo, vertical-align: top
hace el trabajo.
span{
vertical-align: middle;
}
<div>
<img src="http://lorempixel.com/30/30/" alt="small img" />
<span>Doesn't work.</span>
</div>
¿Por qué no vertical-align: middle
funciona? Y, sin embargo, vertical-align: top
hace el trabajo.
span{
vertical-align: middle;
}
<div>
<img src="http://lorempixel.com/30/30/" alt="small img" />
<span>Doesn't work.</span>
</div>
Respuestas:
En realidad, en este caso es bastante simple: aplique la alineación vertical a la imagen. Como todo está en una línea, es realmente la imagen que desea alinear, no el texto.
<!-- moved "vertical-align:middle" style from span to img -->
<div>
<img style="vertical-align:middle" src="https://placehold.it/60x60">
<span style="">Works.</span>
</div>
Probado en FF3.
Ahora puede usar flexbox para este tipo de diseño.
.box {
display: flex;
align-items:center;
}
<div class="box">
<img src="https://placehold.it/60x60">
<span style="">Works.</span>
</div>
span
tamaño de la fuente. Mira mi respuesta .
width:16px;height:16px
), puede ver que la imagen será demasiado baja ...
Aquí hay algunas técnicas simples para alineación vertical:
Este es fácil: establezca la altura de línea del elemento de texto para que sea igual a la del contenedor
<div>
<img style="width:30px; height:30px;">
<span style="line-height:30px;">Doesn't work.</span>
</div>
Coloque absolutamente un div interno en relación con su contenedor
<div style="position:relative;width:30px;height:60px;">
<div style="position:absolute;bottom:0">This is positioned on the bottom</div>
</div>
<div style="display:table;width:30px;height:60px;">
<div style="display:table-cell;height:30px;">This is positioned in the middle</div>
</div>
Para que esto funcione correctamente en todos los ámbitos, tendrás que hackear un poco el CSS. Afortunadamente, hay un error de IE que funciona a nuestro favor. Configurando top:50%
el contenedor y top:-50%
el div interno, puede lograr el mismo resultado. Podemos combinar los dos usando otra característica que IE no admite: selectores avanzados de CSS.
<style type="text/css">
#container {
width: 30px;
height: 60px;
position: relative;
}
#wrapper > #container {
display: table;
position: static;
}
#container div {
position: absolute;
top: 50%;
}
#container div div {
position: relative;
top: -50%;
}
#container > div {
display: table-cell;
vertical-align: middle;
position: static;
}
</style>
<div id="wrapper">
<div id="container">
<div><div><p>Works in everything!</p></div></div>
</div>
</div>
Esta solución requiere un navegador un poco más moderno que las otras soluciones, ya que hace uso de la transform: translateY
propiedad. ( http://caniuse.com/#feat=transforms2d )
La aplicación de las siguientes 3 líneas de CSS a un elemento lo centrará verticalmente dentro de su elemento primario, independientemente de la altura del elemento primario:
position: relative;
top: 50%;
transform: translateY(-50%);
display:table
y display:table-cell
CSS funcionan muy bien, excepto, por supuesto, en IE7 y versiones posteriores. Después de arrancarme el cabello durante varias horas, decidí que realmente no necesitaba tratar con alguien que todavía usara IE7-.
display:table
tiene algunas limitaciones en varios navegadores (en IE11 max-height
no funciona si el elemento está dentro de una celda de tabla), por lo que en algunos casos extremos no es una buena idea alinearse verticalmente usando celdas de tabla.
Conviértalo div
en un contenedor flexible:
div { display:flex; }
Ahora hay dos métodos para centrar las alineaciones de todo el contenido:
Método 1:
div { align-items:center; }
Método 2:
div * { margin-top:auto; margin-bottom:auto; }
Pruebe diferentes valores de ancho y alto en img
y diferentes valores de tamaño de fuente en span
y verá que siempre permanecen en el medio del contenedor.
justify-content: center;
y para espaciar (sin usar etiquetas <br/>) también puede agregar un padding: 1em;
. Gran actualización para nosotros los desarrolladores de navegadores modernos.
Debe aplicar vertical-align: middle
a ambos elementos para que se centre perfectamente.
<div>
<img style="vertical-align:middle" src="http://lorempixel.com/60/60/">
<span style="vertical-align:middle">Perfectly centered</span>
</div>
La respuesta aceptada centra el icono alrededor de la mitad de la altura x del texto al lado (como se define en las especificaciones CSS ). Lo que podría ser lo suficientemente bueno, pero puede verse un poco fuera de lugar, si el texto tiene ascendentes o descendentes que se destacan en la parte superior o inferior:
A la izquierda, el texto no está alineado, a la derecha es como se muestra arriba. Se puede encontrar una demostración en vivo en este artículo sobre alineación vertical .
¿Alguien ha hablado sobre por qué vertical-align: top
funciona en el escenario? La imagen en la pregunta es probablemente más alta que el texto y, por lo tanto, define el borde superior del cuadro de línea. vertical-align: top
en el elemento span y luego simplemente lo coloca en la parte superior del cuadro de línea.
La principal diferencia en el comportamiento entre vertical-align: middle
y top
es que el primero mueve elementos relativos a la línea base del cuadro (que se coloca donde sea necesario para cumplir con todas las alineaciones verticales y, por lo tanto, se siente bastante impredecible ) y el segundo relativo a los límites exteriores del cuadro de línea (que es más tangible)
La técnica utilizada en la respuesta aceptada funciona solo para texto de una sola línea ( demostración ), pero no para texto de varias líneas ( demostración ), como se indica allí.
Si alguien necesita centrar verticalmente el texto de líneas múltiples en una imagen, aquí hay algunas maneras (Métodos 1 y 2 inspirados en este artículo de CSS-Tricks )
CSS:
div {
display: table;
}
span {
vertical-align: middle;
display: table-cell;
}
CSS:
div {
height: 200px; /* height of image */
}
div:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
margin-right: -0.25em; /* Adjusts for spacing */
}
img {
position: absolute;
}
span {
display: inline-block;
vertical-align: middle;
margin-left: 200px; /* width of image */
}
CSS (el violín anterior contiene prefijos de proveedor):
div {
display: flex;
align-items: center;
}
img {
min-width: 200px; /* width of image */
}
Este código funciona tanto en IE como en FF:
<div>
<img style="width:auto; height:auto;vertical-align: middle;">
<span>It does work on all browsers</span>
</div>
Para el registro, los "comandos" de alineación no deberían funcionar en un SPAN, porque es una etiqueta en línea , no una etiqueta de nivel de bloque . Cosas como la alineación, el margen, el relleno, etc. no funcionarán en una etiqueta en línea porque el punto de la línea no es interrumpir el flujo de texto.
CSS divide las etiquetas HTML en dos grupos: en línea y a nivel de bloque. Busque "css block vs inline" y aparecerá un gran artículo ...
http://www.webdesignfromscratch.com/html-css/css-block-and-inline/
(Comprender los principios básicos de CSS es una clave para que no sea tan molesto)
text-align
y vertical-align
(con la excepción de su aplicación en td
elementos para fines de herencia) están diseñadas específicamente para inline
y inline-block
elementos ( span
, img
, etc).
Úselo line-height:30px
para el espacio para que el texto se alinee con la imagen:
<div>
<img style="width:30px; height:30px;">
<span style="line-height:30px;">Doesn't work.</span>
</div>
Otra cosa que puede hacer es establecer el texto line-height
al tamaño de las imágenes dentro de <div>
. Luego configure las imágenes envertical-align: middle;
Esa es realmente la forma más fácil.
margin
Todavía no he visto una solución en ninguna de estas respuestas, así que aquí está mi solución a este problema.
Esta solución solo funciona si conoce el ancho de su imagen.
<div>
<img src="https://placehold.it/80x80">
<span>This is my very long text what should align. This is my very long text what should align.</span>
</div>
div {
overflow:hidden;
}
img {
width:80px
margin-right:20px;
display:inline-block;
vertical-align:middle;
}
span {
width:100%;
margin-right:-100px;
padding-right:100px;
display:inline-block;
vertical-align:middle;
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
}
background:url(../images/red_bullet.jpg) left 3px no-repeat;
Generalmente uso 3px en lugar de top
. Al aumentar / disminuir ese valor, la imagen se puede cambiar a la altura requerida.
Puede configurar la imagen como inline element
usando la display
propiedad
<div>
<img style="vertical-align: middle; display: inline;" src="https://placehold.it/60x60">
<span style="vertical-align: middle; display: inline;">Works.</span>
</div>
Solución multilínea:
<div style="display:table;width:30px;height:160px;">
<img style="display:table-cell;width:30px;height:60px;padding:50px" src='...' />
<div style="display:table-cell;height:30px;vertical-align:middle">
Multiline text centered vertically
</div>
</div>
<!-- note: img (height + 2x padding) must be equal to root div height -->
Funciona en todos los navegadores y ie9 +
Puede ser confuso, estoy de acuerdo. Intenta utilizar las características de la tabla. Utilizo este simple truco CSS para colocar modales en el centro de la página web. Tiene gran soporte de navegador:
<div class="table">
<div class="cell">
<img src="..." alt="..." />
<span>It works now</span>
</div>
</div>
y parte de CSS:
.table { display: table; }
.cell { display: table-cell; vertical-align: middle; }
Tenga en cuenta que debe diseñar y ajustar el tamaño de la imagen y el contenedor de la tabla para que funcione como desee. Disfrutar.
Primero CSS en línea no se recomienda , realmente estropea tu HTML.
Para alinear la imagen y la amplitud, simplemente puede hacer vertical-align:middle
.
.align-middle {
vertical-align: middle;
}
<div>
<img class="align-middle" src="https://i.stack.imgur.com/ymxaR.png">
<span class="align-middle">I'm in the middle of the image! thanks to CSS! hooray!</span>
</div>
No estoy seguro de por qué no lo muestra en el navegador de su navegación, pero normalmente uso un fragmento como este cuando intento mostrar un encabezado con una imagen y un texto centrado, ¡espero que ayude!
https://output.jsbin.com/jeqorahupo
<hgroup style="display:block; text-align:center; vertical-align:middle; margin:inherit auto; padding:inherit auto; max-height:inherit">
<header style="background:url('http://lorempixel.com/30/30/') center center no-repeat; background-size:auto; display:inner-block; vertical-align:middle; position:relative; position:absolute; top:inherit; left:inherit; display: -webkit-box; display: -webkit-flex;display: -moz-box;display: -ms-flexbox;display: flex;-webkit-flex-align: center;-ms-flex-align: center;-webkit-align-items: center;align-items: center;">
<image src="http://lorempixel.com/60/60/" title="Img title" style="opacity:0.35"></img>
http://lipsum.org</header>
</hgroup>
<!DOCTYPE html>
<html>
<head>
<style>
.block-system-branding-block {
flex: 0 1 40%;
}
@media screen and (min-width: 48em) {
.block-system-branding-block {
flex: 0 1 420px;
margin: 2.5rem 0;
text-align: left;
}
}
.flex-containerrow {
display: flex;
}
.flex-containerrow > div {
justify-content: center;
align-items: center;
}
.flex-containercolumn {
display: flex;
flex-direction: column;
}
.flex-containercolumn > div {
width: 300px;
margin: 10px;
text-align: left;
line-height: 20px;
font-size: 16px;
}
.flex-containercolumn > site-slogan {font-size: 12px;}
.flex-containercolumn > div > span{ font-size: 12px;}
</style>
</head>
<body>
<div id="block-umami-branding" class="block-system block-
system-branding-block">
<div class="flex-containerrow">
<div>
<a href="/" rel="home" class="site-logo">
<img src="https://placehold.it/120x120" alt="Home">
</a>
</div><div class="flex-containerrow"><div class="flex-containercolumn">
<div class="site-name ">
<a href="/" title="Home" rel="home">This is my sitename</a>
</div>
<div class="site-slogan "><span>Department of Test | Ministry of Test |
TGoII</span></div>
</div></div>
</div>
</div>
</body>
</html>
Probablemente quieras esto:
<div>
<img style="width:30px; height:30px;">
<span style="vertical-align:50%; line-height:30px;">Didn't work.</span>
</div>
Como otros han sugerido, prueba vertical-align
la imagen:
<div>
<img style="width:30px; height:30px; vertical-align:middle;">
<span>Didn't work.</span>
</div>
CSS no es molesto. Simplemente no lees la documentación . ;PAGS
vertical-align