¿Alinear verticalmente el texto al lado de una imagen?

¿Por qué no vertical-align: middlefunciona? 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>

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>

Aquí hay algunas técnicas simples para alineación vertical:

Alineación vertical de una línea: media

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>

Varias líneas de alineación vertical: abajo

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>

Alineación vertical de líneas múltiples: medio

<div style="display:table;width:30px;height:60px;">
  <div style="display:table-cell;height:30px;">This is positioned in the middle</div>
</div>

Si debe admitir versiones antiguas de IE <= 7

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>

Altura variable del contenedor alineación vertical: medio

Esta solución requiere un navegador un poco más moderno que las otras soluciones, ya que hace uso de la transform: translateYpropiedad. ( 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%);

Conviértalo diven 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; }

MANIFESTACIÓN

Método 2:

div * { margin-top:auto; margin-bottom:auto; }

MANIFESTACIÓN

Pruebe diferentes valores de ancho y alto en imgy diferentes valores de tamaño de fuente en spany verá que siempre permanecen en el medio del contenedor.

Debe aplicar vertical-align: middlea 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: topfunciona 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: topen 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: middley topes 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 )

Método # 1: tablas CSS ( FIDDLE ) (IE8 + ( caniuse ))

CSS:

div {
    display: table;
}
span {
    vertical-align: middle;
    display: table-cell;
}

Método # 2: pseudo elemento en el contenedor ( FIDDLE ) (IE8 +)

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 */
}

Método 3: Flexbox ( FIDDLE ) ( caniuse )

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>

Debido a que debe establecer la line-heightaltura del div para que esto funcione

Básicamente, tendrás que bajar a CSS3.

-moz-box-align: center;
-webkit-box-align: center;

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)

Úselo line-height:30pxpara 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-heightal 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.

marginTodaví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.

El HTML

<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>

El CSS

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.

Escribe estas propiedades de span

span{
    display:inline-block;
    vertical-align:middle;
}

Usar display:inline-block;cuando usa la vertical-alignpropiedad. Estas son propiedades asociadas

Puede configurar la imagen como inline elementusando la displaypropiedad

<div>
  <img style="vertical-align: middle; display: inline;" src="https://placehold.it/60x60">
  <span style="vertical-align: middle; display: inline;">Works.</span>
</div>

En un botón en jQuery mobile, por ejemplo, puede modificarlo un poco aplicando este estilo a la imagen:

.btn-image {
    vertical-align:middle;
    margin:0 0 3px 0;
}

Solución multilínea:

http://jsfiddle.net/zH58L/6/

<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-alignla 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