Imagen de alineación vertical

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