Supongamos que desea que una imagen (o cualquier otro elemento) flote visualmente hacia la izquierda en un párrafo de texto. Pero como … en el medio del párrafo, no justo en la parte superior. Es factible, ¡pero ciertamente está en el ámbito de los trucos CSS!
Una cosa que puedes hacer es colocar la imagen justo en el medio del párrafo:
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing
<img src="https://css-tricks.com/float-element-in-the-middle-of-a-paragraph/tree.jpg" alt="An oak tree." />
elit. Similique quibusdam aliquam provident suscipit
corporis minima? Voluptatem temporibus nulla
</p>Pero eso es mega incómodo. Tenga en cuenta el texto alternativo. No podemos tener al azar alt texto en medio de una oración. Es semántico y literalmente confuso para las personas que utilizan tecnología de asistencia.
Entonces lo que tenemos que hacer es poner la imagen antes del párrafo.
<img src="https://css-tricks.com/float-element-in-the-middle-of-a-paragraph/tree.jpg" alt="An oak tree." />
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing
elit. Similique quibusdam aliquam provident suscipit
corporis minima? Voluptatem temporibus nulla
</p>Pero cuando hacemos eso, ya no estamos exactamente flotando la imagen en el medio del párrafo. Está justo en la parte superior. No margin-top o traducción vertical o cualquier cosa nos va a salvar aquí. margin simplemente extenderá la altura del área flotante y translate empujará la imagen al texto.
El truco, al menos uno que he encontrado, es aprovechar shape-outside y un polygon() para remodelar el área flotante alrededor de donde lo desee. Puede omitir la parte superior izquierda. Usar Clippy es una excelente manera de comenzar con el polígono:
Pero en lugar del clip-path Clippy te da por defecto, aplicas ese valor a shape-outside.
Eso debería ser suficiente si solo está colocando una caja en ese lugar. Pero si es literalmente una imagen o necesita un color de fondo, es posible que también deba aplicar clip-path y quizás transformar las cosas en su lugar. Aquí es donde terminé tocando el violín.
Ver la pluma
Recorte flotante en medio del párrafo. por Chris Coyier (@chriscoyier)
en CodePen.