Imagen de alineación vertical

Tengo un div que contiene una imagen y una etiqueta ap (ver a continuación). Quiero alinear la imagen en el medio del div verticalmente dependiendo de cuántas líneas es el párrafo. Vertical-align no funciona. Estoy usando JavaScript ahora mismo para descubrir cuánto agregar al margen superior, pero prefiero usar CSS. ¿Algunas ideas?

Multi-line

Intente configurar el atributo de line-height de línea del elemento p a la altura de la imagen, por ejemplo:

 div p { line-height: 18px; } 

Editar: Acabo de darme cuenta de que leí mal la pregunta y me olvidé del hecho de que la p sería multilínea. Una opción para intentar es eliminar por completo el elemento img y configurarlo como la background-image de background-image de la p lugar, con una background-position de background-position de la left, center . Algo como:

 div p { background: transparent url(path/to/img) no-repeat left center; padding-left:30px; /* Set based on width of image */ } 

Esto es CSS puro, alinea verticalmente la imagen y también cambia el tamaño de la imagen si es más alta (o más ancha) que la caja contenedora. Ergo, la caja y la imagen pueden ser de cualquier tamaño sin romper la alineación vertical. Además, es posible que desee agregar un margen izquierdo a las tags

para evitar que la imagen las oculte.

CSS

 /* Positioning */ .absoluteCenterWrapper { position: relative; /* Contains the image in the div */ } .absoluteCenter { /* Aligns image vertically */ margin: auto; position: absolute; top: 0; bottom: 0; } .absoluteCenterWrapper p { /* Pushes 

to edge of image */ margin-left: 101px; /* Width of image */ } .absoluteCenter { /* Specifies width of image to avoid overlap if image changes */ width: 101px; /* Width of image */ } /* Sizing - resizes down to avoid cutting off */ .absoluteCenter { max-height: 100%; max-width: 100%; } /* Making it "pretty" */ .absoluteCenterWrapper { margin: 1em; padding: 0.001em; /* <- Hack to contain margins */ outline: 1px solid red; } .absoluteCenterWrapper p { margin-top: 1em; margin-bottom: 1em; padding-left: 1em;}

 

Paragraph goes here.

Paragraph goes here.

Paragraph goes here.

Paragraph goes here.

Paragraph goes here.

Da la visualización de la imagen: bloquear, flotar: izquierda y alinear verticalmente: medio. O bien, le da una altura de línea igual a la del elemento contenedor.

los atributos vertical-alinear de CSS solo funcionan en celdas de tabla y elementos en línea. Como la etiqueta de párrafo especifica un elemento de bloque por defecto, no hace nada. Para que su texto se alinee como lo describe, o bien debe separar su div en dos contenedores o utilizar una tabla. Aquí hay una buena página para ayudarlo a comprender un poco mejor: Entender vertical-alinear

¿Es una especie de trabajo de dos columnas? (imagen a la izquierda, texto a la derecha)

Si es así, seguramente podría simplemente pegar cada elemento en su propia div …

 

multiline

Piensa que eso haría lo que estás buscando

Tal vez la solución en Jak psát web ayude.

Añadir

 div img { float: left; }