debajo - poner texto al lado de una imagen css

¿Alinear verticalmente el texto junto a una imagen?

Question

¿Por qué no vertical-align: middle trabajo vertical-align: middle ? Y, sin embargo, vertical-align: top funciona.

<div>
<img style="width:30px;height:30px">
<span style="vertical-align:middle">Doesn''t work.</span>
</div>

Answer 1

Aquí hay algunas técnicas simples para alinear verticalmente:

Una línea de alineación vertical: medio

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>

Alineación vertical de varias líneas: parte inferior

Absolutamente posicionar un div interior con respecto a 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 múltiples líneas: 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 tiene que soportar versiones antiguas de IE <= 7

Para que esto funcione correctamente en todos los ámbitos, deberás hackear un poco el CSS. Afortunadamente, hay un error de IE que funciona a nuestro favor. Configuración top:50% en el contenedor y top:-50% en la división interna, puede lograr el mismo resultado. Podemos combinar los dos usando otra característica que IE no admite: selectores de CSS avanzados.

<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 vertical-align: middle

Esta solución requiere un navegador un poco más moderno que las otras soluciones, ya que hace uso de la propiedad transform: translateY . ( 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 padre independientemente de la altura del elemento padre:

position: relative;
top: 50%;
transform: translateY(-50%);

Answer 2

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

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

Answer 3

Cambia tu div en un contenedor flexible:

div {display:flex;}

Ahora hay dos métodos para centrar las alineaciones para todo el contenido:

Método 1:

div {align-items:center;}

DEMO

Método 2:

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

DEMO

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

Answer 4

Debe aplicar vertical-align: middle a ambos elementos para que se haya centrado 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 que se encuentra a su lado (como se define en las especificaciones de CSS ). Lo que podría ser lo suficientemente bueno, pero puede parecer un poco extraño, si el texto tiene ascendentes o descendientes que sobresalen justo 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 de 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, luego solo lo coloca en la parte superior del cuadro de línea.

La principal diferencia de comportamiento entre vertical-align: middle y top es que los primeros elementos se mueven en relación con la línea de base de la caja (que se coloca donde sea necesario para cumplir con todas las alineaciones verticales y, por lo tanto, se siente bastante impredecible ) y la segunda en relación con los límites externos de El cuadro de línea (que es más tangible).

Answer 5

En primer lugar, el CSS en línea no se recomienda en absoluto, realmente desordena su HTML.

Para alinear la imagen y el intervalo, 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>

Answer 6

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

Answer 7

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

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

Answer 8

Escribe estas propiedades de span

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

display:inline-block; uso display:inline-block; Cuando usa vertical-align propiedad vertical-align Estas son propiedades asociadas

Answer 9

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>

Answer 10

La técnica utilizada en la respuesta aceptada funciona solo para texto de línea simple ( demo ), pero no para texto de varias líneas ( demo ), como se indica allí.

Si alguien necesita centrar verticalmente el texto de varias líneas en una imagen, aquí hay algunas formas (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: FIDDLE en 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 */
}

Answer 11

Otra cosa que puedes hacer es establecer la line-height de line-height del texto al tamaño de las imágenes dentro de <div> . Luego configura las imágenes para vertical-align: middle;

En serio, es la forma más fácil.

Answer 12

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 en 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 aparece 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)

Answer 13

Porque tienes que establecer la line-height a la altura del div para que esto funcione

Answer 14

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, intente vertical-align en 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 . ;PAG

Answer 15

Puede configurar la imagen como inline element usando la propiedad de display

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

Answer 16

Puede ser confuso, estoy de acuerdo. Trate de utilizar las características de la mesa. Uso este simple truco de CSS para ubicar los modales en el centro de la página web. Tiene soporte de navegador grande:

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

Answer 17

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 browers y ie9 +.

Answer 18

Todavía no he visto una solución con margin en ninguna de estas respuestas, así que aquí está mi solución a este problema.

Esta solución solo funciona si conoces el ancho de tu 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;
}

Answer 19

Use line-height:30px para el intervalo 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>

Answer 20

background:url(../images/red_bullet.jpg) left 3px no-repeat;

Generalmente uso 3px en lugar de la top . Al aumentar / disminuir ese valor, la imagen se puede cambiar a la altura requerida.