Как разместить два дочерних элемента внутри контейнера, чтобы первый был по центру, а второй - сбоку.

Содержание

Вопрос или проблема
Ответ или решение
Шаг 1: Разметка компонента
Шаг 2: Стилизация кнопки
Шаг 3: Настройка поведения при переполнении
Шаг 4: Как это работает
Заключение

Вопрос или проблема

У меня есть кнопочный компонент (на React), который я хочу сделать так, чтобы его содержимое позиционировалось по центру, при этом позволяя указать иконки слева или справа. Содержимое должно быть расположено по центру относительно родителя и учитывать каждую икону (опционально), если она предоставлена.

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

Ниже приведены несколько изображений того, чего я пытаюсь достичь.

Я пытался использовать абсолютное позиционирование для обоих элементов с transform: translateX, чтобы подкорректировать позицию содержимого, но это не работает, если содержимое занимает всё пространство или длиннее ожидаемого. Я также пытался использовать flexbox, но это не позволяет выровнять один элемент относительно родителя, не принимая во внимание иконки. Установка отступа слева или справа (в зависимости от ширины иконы) тоже, похоже, не работает, так как это смещает содержимое и нарушает центральное выравнивание.

Буду очень благодарен за любые советы или направления, которые я могу попробовать, чтобы заставить это работать. Стараюсь избежать “хакающих” решений на базе Javascript, где мне пришлось бы рассчитывать каждое контейнер 🙏

Ответ или решение

Для того чтобы позиционировать два дочерних элемента внутри контейнера так, чтобы один из них находился по центру, а другой — сбоку (слева или справа), можно использовать методы CSS Flexbox и Grid. В данном случае мы стремимся создать кнопку в React, где контент будет центральным, а иконки будут расположены по бокам. Этот подход позволит избегать сложных JavaScript-решений и упростить стилизацию. Давайте рассмотрим несколько примеров реализации.

Шаг 1: Разметка компонента

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

import React from 'react';
import './Button.css'; // Подключаем стили

const Button = ({ iconLeft, iconRight, children }) => {
  return (
    <div className="button-container">
      {iconLeft && <span className="icon-left">{iconLeft}</span>}
      <span className="button-content">{children}</span>
      {iconRight && <span className="icon-right">{iconRight}</span>}
    </div>
  );
};

export default Button;

Шаг 2: Стилизация кнопки

Теперь добавим стили в Button.css, используя CSS Flexbox для выравнивания элементов.

.button-container {
  display: flex;
  align-items: center; 
  justify-content: space-between;
  position: relative; 
  width: 100%; /* Устанавливаем ширину контейнера */
  padding: 0 15px; /* Отступ для визуального отделения */
}

.icon-left,
.icon-right {
  flex: 0 0 auto; /* Не растягиваем иконки */
}

.button-content {
  flex: 1; /* Контент занимает оставшееся пространство */
  text-align: center; /* Текст по центру */
  white-space: nowrap; /* Чтобы текст не переносился на следующую строку */
  overflow: hidden; /* Скрываем лишний контент */
  text-overflow: ellipsis; /* В случае переполнения — добавляем многоточие */
}

Шаг 3: Настройка поведения при переполнении

Важно учесть, что контент может быть длиннее, чем доступное пространство. Использование text-overflow: ellipsis; в классе .button-content позволяет управлять поведением текста при переполнении, добавляя многоточие в конце. Если визуально необходимо отображать текст на нескольких строках и дать возможность ему "провисать", уберите свойство white-space: nowrap; и настройте соответствующее поведение.

Шаг 4: Как это работает

Контейнер: Используя display: flex, все дочерние элементы располагаются в одном ряду. Параметр justify-content: space-between обеспечивает равные промежутки между элементами, сдвигая контент в центр между иконками.
Иконки: Они не растягиваются и сохраняют свои размеры, оставаясь на месте.
Контент: Он занимает всё доступное пространство между иконками. Если контент слишком длинный, то его поведение будет управляться свойствами overflow и text-overflow.

Заключение

Такой подход позволяет элегантно решить задачу центровки текста между иконками без использования сложного JavaScript-кода. Flexbox значительно упрощает такие задачи и делает ваш компонент адаптивным и гибким. Выбор правильных CSS-свойств минимизирует необходимость использования дополнительных вычислений, что и делает ваше решение более чистым и простым для поддержки.

Если потребуется дальнейшая помощь или дополнительные вопросы, не стесняйтесь обращаться!

Как разместить два дочерних элемента внутри контейнера, чтобы первый был по центру, а второй – сбоку.