Центрировать вертикально рядом с плавающим элементом

Интересно, существует ли чистое элегантное CSS-решение, позволяющее разместить текст рядом с элементом с плавающей запятой, идущий под ним, когда его высота выше, чем элемент с плавающей запятой, НО ТАКЖЕ центрироваться, когда его высота ниже, чем элемент с плавающей запятой. Следующие два изображения представляют то, что я хочу получить:

И есть закодированная версия обоих случаев:

.float {
  float: right;
  height: 80px;
  width: 500px;
  background-color: blue;
}

#with_text_centered {
  height: 80px;
  position: relative;
}

#with_text_centered p {
  position: relative;
  top: 50%;
  transform: translate(0, -50%);
}

<h1>WITH TEXT UNDER THE FLOAT</h1>

<div class=ctn>
  <div class=float></div>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>

<h1>WITH TEXT CENTERED</h1>

<div id = "with_text_centered">
  <div class=float></div>
  <p>Lorem ipsum.</p>
</div>

Я могу сделать каждый отдельно, но не могу найти способ сделать оба (для целей адаптивного дизайна). Единственное решение, которое я нашел на данный момент, требует js (с использованием ResizeObserver), и мне кажется странным, что в этом случае приходится использовать js, что кажется довольно простым.

Кроме того, я бы наверняка предпочел, чтобы не приходилось где-либо определять высоту. В моем примере я, к сожалению, определяю высоту 80 пикселей. Фактически, в моей версии, использующей js, я переключаюсь на флексбокс, когда текст ниже элемента float. IMO, проще и элегантнее центрировать текст. Когда я это делаю, число с плавающей запятой игнорируется (флексы созданы для игнорирования числа с плавающей запятой).

Я на 95% уверен, что это невозможно, но трудно сказать наверняка.

— 04.03.2024 11:06

@Alohci, с 75 просмотрами и ни одной попыткой ответа я начинаю думать, что решения действительно нет :'( . Но спасибо всем, кто пытается!

— 04.03.2024 19:53

@Alohci, это возможно :) [будем надеяться, что это кроссбраузерный подход и у нас не будет странных крайних случаев]

— 06.03.2024 22:05

html css css-float

01.03.2024 12:21

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

256

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Это возможно, используя дополнительную обертку. Хитрость заключается в том, чтобы иметь возможность использовать top: 50%, что невозможно без указания высоты. Использование flexbox вызовет выравнивание растяжения и сделает высоту определенной, и вы можете это сделать.

В первом случае ничего не произойдет, потому что top: 50% будет отменено при переводе, поскольку текст определяет высоту.

.float {
  float: right;
  height: 150px;
  width: 300px;
  background-color: blue;
  margin: 10px;
}

.wrapper {
  display: flex;
}
.wrapper > div {
  flex: 1;
}

p {
  margin: 0;
  position: relative;
  top: 50%;
  translate: 0 -50%
}

<h1>WITH TEXT UNDER THE FLOAT</h1>

<div class = "wrapper">
  <div>
    <div class=float></div>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
      dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing
      elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
      dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
      dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
      occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
      quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa
      qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
      ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </div>
</div>

<h1>WITH TEXT CENTERED</h1>

<div class = "wrapper">
  <div >
    <div class=float></div>
    <p>Lorem ipsum sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
  </div>
</div>

Великолепно! Это кажется идеальным. Хорошая работа.

— 06.03.2024 22:33

Это очень круто. Я был почти уверен, что это невозможно.

— 06.03.2024 23:04

06.03.2024 22:03