Is there a way to center text of varying lengths vertically and allow it to wrap around a floating image?

Question

Is there a way to center text of varying lengths vertically and allow it to wrap around a floating image?

Looking to create a div with an image floated to the top left and text of varying lengths. The aim is to have the text centered in the middle if it's shorter than the image or wrap around it if there's enough content.

The basic layout is:

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

Attempts with display table and flexbox treat the image and text as separate blocks, hindering text wrap. Fixed height isn't viable due to variable text length needing vertical alignment before wrapping.

A fiddle showcases two hard-coded styles aiming for a single solution that adapts to any text length input.

Is there a workaround without resorting to javascript hacks?

html css vertical-alignment

Answer 1

Answer №1

To tackle this issue, one effective solution is to encapsulate the content within a wrapper element. By doing so, you can prevent it from inheriting flex properties directly while still retaining the flexibility to utilize flex as required.

.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! 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>

Answer 2

To tackle this issue, one effective solution is to encapsulate the content within a wrapper element. By doing so, you can prevent it from inheriting flex properties directly while still retaining the flexibility to utilize flex as required.

.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! 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>

Is there a way to center text of varying lengths vertically and allow it to wrap around a floating image?

Answer №1

Similar questions

increasing the SQL integer value with padding

Guide on inserting a dropdown menu following a specific count of <li> elements using Javascript or Jquery

Voice recognition feature in the latest version of Chrome on Android devices

What method would you recommend for modifying HTML text that has already been loaded using JSP?

Send an identifier to the following page upon selecting a hyperlink in AngularJS

Loading a PHP template into HTML using a JQuery loop

Determine the length of the content within an HTML container that has

Loading a local CSS file upon opening a tab with a specific URL

Sort out the table using Javascript and then choose all the checkboxes

I'm having trouble figuring out how to perfectly center this div on all types of devices

changing the vertical position of an element using JavaScript

How can I apply a CSS filter to achieve a blue-toned effect on an image?

Launching event handlers and applying CSS classes within a single scenario

Seamless infinite background scrolling on the canvas without any disruptions

Different ways to automatically trigger a function in JavaScript

Original: full size responsive background images without stretchRewritten: high-quality

Header fixed vertically

Ensure the browser back button navigates to the login page seamlessly, without displaying any error

Scaling images using jQuery for enhanced visual appeal

Troubleshooting: Custom checkbox using CSS ::before does not display properly on Firefox and Edge browsers