1

I'm trying to set up a div that contains an image floated to the top left, and text of an unknown length. The goal is to have the text centered in the middle of the div if it's smaller than the image, or wrap around the the image if there's enough of it.

My general layout is:

<div class="wrapper">
  <img src="http://placekitten.com/50/50" class="image" style="float: left">
  <p class="text">
    Text goes here
  </p>
</div>

I've tried display table and flexbox, but those treat the image and the text as distinct blocks and prevent long text from wrapping around the image. Fixed height also doesn't work since the text is variable in length and there can be several lines that need to align vertically before it starts wrapping around the image.

I've set up a fiddle with the result I'm trying to get. It uses two different hard-coded styles but I'm trying to find a single solution that will work no matter how much text is supplied.

Is there a way around this without some kind of javascript hack?

CSturgess
  • 1,547
  • 2
  • 13
  • 29
  • Take a Look at https://stackoverflow.com/questions/19179424/how-to-wrap-text-around-an-image-using-html-css/19179519 Is this what you want? – Subhendu Kundu Feb 20 '19 at 20:55
  • No, the wrapping isn't the main problem. The image is already floated. The issue is having one or two lines of text (not enough to wrap around) vertically align themselves inside the container without ruining the wrapping effect. – CSturgess Feb 20 '19 at 21:02

1 Answers1

1

A solution to this is to wrap the content with a wrapper, so that it doesn't inherit flex properties as a direct descendant. This also gives you some flexibility with using flex as needed.

.wrapper {
  border: 1px solid black;
  padding: 0;
  overflow: auto;
  display: flex;
}

.image {
  vertical-align: middle;
}

.text {
  margin: 0;
}

.content {
  flex: 1;
}

.content p {
  display: inline;
  vertical-align: middle;
}
<p>
  This text should be centered vertically:
</p>

<div class="wrapper">
  <div class="content">
    <img src="http://placekitten.com/50/50" class="image">
    <p class="text">
      A little bit of text!
    </p>
  </div>
</div>

<p>
  This text should wrap around the image, going underneath it:
</p>

<div class="wrapper">
  <div class="content">
    <img src="http://placekitten.com/50/50" class="image">
    <p class="text">
      A lot of text! I mean a whole lot! Like tons and tons! You won't believe how much text. It's still going even. How is it still going? Who knows, but it's doing it! Oh wow it just isn't stopping. So much text! It's still going even. How is it still going?
      Who knows, but it's doing it! Oh wow it just isn't stopping. So much text! It's still going even. How is it still going? Who knows, but it's doing it! Oh wow it just isn't stopping. So much text! It's still going even. How is it still going? Who
      knows, but it's doing it! Oh wow it just isn't stopping. So much text! It's still going even. How is it still going? Who knows, but it's doing it! Oh wow it just isn't stopping. So much text! Oh wait, it's over.
    </p>
  </div>
</div>

<p>
  This is what I'm trying to avoid:
</p>

<div class="wrapper">
  <div class="content">
    <img src="http://placekitten.com/50/50" class="image">
    <p class="text">
      A lot of text! I mean a whole lot! Like tons and tons! You won't believe how much text. It's still going even. How is it still going? Who knows, but it's doing it! Oh wow it just isn't stopping. So much text! It's still going even. How is it still going?
      Who knows, but it's doing it! Oh wow it just isn't stopping. So much text! It's still going even. How is it still going? Who knows, but it's doing it! Oh wow it just isn't stopping. So much text! It's still going even. How is it still going? Who
      knows, but it's doing it! Oh wow it just isn't stopping. So much text! It's still going even. How is it still going? Who knows, but it's doing it! Oh wow it just isn't stopping. So much text! Oh wait, it's over.
    </p>
  </div>
</div>
soulshined
  • 9,612
  • 5
  • 44
  • 79
  • That doesn't look like it's vertically-aligning the single line of text. – CSturgess Feb 20 '19 at 21:20
  • ah, I assumed the first 2 examples were positive results. It read kinda funny. Let me revisit @CSturgess – soulshined Feb 20 '19 at 21:28
  • Ah, my bad. I'll edit the fiddle to give more clarification. – CSturgess Feb 20 '19 at 21:30
  • I see now, I'm not so sure you can satisfy both requirements in a single rule-set @CSturgess , or at least I don't know how to. The only thing I can think of is `vertical-align` to an inline element. `

    ` are not inline by nature. I don't think it will look good however because it would be hard to gauge how many lines are in an 'inline' element. I'll update though

     – soulshined Feb 20 '19 at 21:55
  • yeah, its not pretty @CSturgess lol. But this is a good challenge! I will think about this some more and review some documentation. Looking forward to what other people provide too – soulshined Feb 20 '19 at 22:00