0

I have this problem that I can't solve. Basically, I want to do this: my problem

This is a screenshot of me putting the <img> into the p tags, but I am not happy with that solution. For example - What if I don't know the number of lines in my paragraph and I still want to centre the image ...

I tried solving this in css:

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

This doesn't work because the container is also affecting the p element ... So why don't I just put the img into another div? Well, this doesn't work either...

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

This doesn't work, because of the width of the img_container is affecting the p also and If I don't make the width:100%; than the div is useless and the img will not be at the right side as I wanted it to be ...

I found a lot of "wrapping text around an image" questions and answers that are pointed me to css align property, but I am using html5 and this does not work for me.

I also want to point out that I am not from an English speaking country so searching for topics is hard for me if I don't know the exact name of the topic. So if there is an entire thing based around this topic than please point me into direction of it and I will be happy to read it.

SOLUTION: I solved it with the shape-outside thing, but rather than calculating background I just added an img tag to the div ... it ended like this

img {position: absolute; top:100px;}
marc_s
  • 732,580
  • 175
  • 1,330
  • 1,459
Hizrok
  • 13
  • 3
  • possible duplicate of : https://stackoverflow.com/questions/499829/how-can-i-wrap-text-around-a-bottom-right-div – Temani Afif Apr 01 '18 at 16:26
  • So there is no way to do this in simple html/css (not hard-coding it as I said in the post)? I need to do this in javascript? – Hizrok Apr 01 '18 at 16:50

2 Answers2

2

Here is an idea using shape-outside but you need to pay attention to browser support:

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;
}
<div></div>
<p>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</p>
Temani Afif
  • 245,468
  • 26
  • 309
  • 415
-2

From your screenshot, which you want to design, I think you had not use the flex property. Instead, you can use simple float: right for img. This floating img will wrapped by paragraph text. I will be happy if this is help you.

Kaustavi Banerjee
  • 47
  • 3
  • floating to right and left will leave the image on top, but what if I want to postion it in the middle? – Hizrok Apr 01 '18 at 17:08