Texto HTML / CSS alrededor de la imagen

Tengo este problema que no puedo resolver. Básicamente, quiero hacer esto: mi problema

Esta es una captura de pantalla donde coloco en las tags p , pero no estoy satisfecho con esa solución. Por ejemplo, ¿qué pasa si no sé el número de líneas en mi párrafo y todavía quiero centrar la imagen …

Intenté resolver esto en css:

 .container {display:flex; justify-content:flex-end} .item {align-self: center} 

Esto no funciona porque el contenedor también está afectando al elemento p … Entonces, ¿por qué no simplemente pongo el img en otro div? Bueno, esto tampoco funciona …

 .img_container {display: flex; justify-content:flex-end; width:100%;} .item {align-self: center;} 

Esto no funciona, porque el ancho del img_container está afectando también a la p y si no hago el width:100%; que el div es inútil y el img no estará en el lado derecho como yo quería que fuera …

Encontré una gran cantidad de preguntas y respuestas sobre “envolver texto alrededor de una imagen” que me indican que css alinee la propiedad, pero estoy usando html5 y esto no funciona para mí.

También quiero señalar que no soy de un país de habla inglesa, por lo que es difícil para mí buscar temas si no sé el nombre exacto del tema. Entonces, si hay algo interno basado en este tema, por favor diríjanme a él y me complacerá leerlo.

SOLUCIÓN: Lo resolví con la forma exterior, pero en vez de calcular el fondo acabo de agregar una etiqueta img al div … terminó así

 img {position: absolute; top:100px;} 

Aquí hay una idea que usa shape-outside pero debe prestar atención al soporte del navegador :

 body { max-width:600px; } p { text-align:justify; } div { shape-outside: inset(50px 0px 50px 0px); background: url(https://lorempixel.com/400/200/) 5px 50px/100% calc(100% - 100px) no-repeat; width: 200px; height: 200px; float: right; } 
 

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis impedit libero esse odio excepturi fuga est ut itaque a quod suscipit, rerum asperiores. Consequuntur voluptates illo rerum recusandae pariatur asperiores, aspernatur, saepe ipsum error dolorem, quod inventore possimus modi deleniti tenetur et officiis. Nemo ab in totam ratione sequi error, ea dolorum repudiandae omnis, eaque facere impedit fugiat. Dolorum distinctio autem sequi enim quidem esse accusamus repudiandae voluptatum nobis, velit, m fuga labore dolores, autem blanditiis, dolorem error ex enim fugiat quisquam aut reprehenderit deleeriores unde? Tempora dolorem, ad quidem quis adipisci dolores tempore m fuga labore dolores, autem blanditiis, dolorem error ex enim fugiat quisquam aut reprehenderit deleeriores unde? Tempora dolorem, ad quidem quis adipisci dolores tempore

De su captura de pantalla, que desea diseñar, creo que no ha usado la propiedad flex. En cambio, puede usar flotador simple: derecho para img. Esta img flotante estará envuelta por texto de párrafo. Estaré feliz si esto te ayuda.