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