Центрирование горизонтали по правому столбцу, чтобы текст находился посередине экрана

<div className = {css.title} >
        <div className = {css.row}>
            <div className = {css.columnLeft}>
              <div className = {css.header}>Images</div>
            </div>
            <div className = {css.columnRight}>
              <strong>Image 1 of 2</strong>
            </div>
        </div>
        <Icon />
      </div>

css

.row {
  width: 100%;
  display: flex;
  align-items: center;
}

.columnLeft {
  flex: 1 0 25%;
  text-align: left;
}

.columnRight {
  flex: 1 0 75%;
}

В настоящее время делает

Я хотел бы, чтобы он был выровнен по горизонтали больше, чем между левым и центральным.

минимальный воспроизводимый пример был бы полезен.

Kameron 10.02.2023 21:40
Приемы CSS-макетирования - floats и Flexbox
Приемы CSS-макетирования - floats и Flexbox
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...
Введение в CSS
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
CSS: FlexBox
CSS: FlexBox
Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.
0
1
60
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

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

Чтобы сохранить «Изображение 1 из 2» (центральный столбец) в середине экрана:

  • дайте левый и правый 1 столбцы flex: 1 1 50%
  • дать центральную колонку flex: 0 0 auto

Это заставит левый и правый столбцы начать вычисление гибкости с базы 50% (что дает им равный вес, независимо от неравной ширины содержимого). Центральный столбец будет отталкиваться от левого и правого столбцов и занимать равное количество пустого пространства от каждого, чтобы отобразить его содержимое 2.

Если вы хотите, чтобы центральная колонка начинала сворачиваться с определенной ширины, дайте ей max-width и text-align: center.

Вот об этом.

<div className = {css.title}>
  <div className = {css.row}>
    <div className = {css.columnLeft}>
      <div className = {css.header}>Images</div>
    </div>
    <div className = {css.columnCenter}>
      <strong>Image 1 of 2</strong>
    </div>
    <div className = {css.columnRight}>
      <Icon />
    </div>
  </div>
</div>

CSS:

.row {
  display: flex;
}
.columnLeft,
.columnRight {
  flex: 1 1 50%;
}
.columnCenter {
  flex: 0 0 auto;
  display: flex;
  justify-content: center;
}
.columnRight {
  display: flex;
  flex-direction: row-reverse;
}

HTML-демонстрация:

.row {
  display: flex;
  justify-content: center;
}

.columnLeft, .columnRight {
  flex: 0 1 50%;
  border: 1px solid red;
}

.columnCenter {
  flex: 0 0 auto;
  display: flex;
  justify-content: center;
}
.columnRight {
  display: flex;
  flex-direction: row-reverse;
}
.middle {
  width: 1px;
  height: 2rem;
  background-color: red;
}
<div class = "row">
  <div class = "columnLeft">
    <div class = "header">More content on left side</div>
  </div>
  <div class = "columnCenter">
    <strong>I am centered</strong>
  </div>
  <div class = "columnRight">Icon</div>
</div>
<div class = "row">
  <div class = "middle" />
</div>

Примечания:

1 - Я дал среднему гибкому элементу класс columnCenter и поместил обертку .columnRight вокруг <Icon />, потому что в вашем примере центральный элемент имел класс columnRight, что сбивало с толку (например, неправильное имя), ИМХО.
2 — Имейте в виду, что flex гибкий (отсюда и название). Если в одном из столбцов содержится значительно больше содержимого, чем в другом, равное отталкивание центрального столбца от боковых сторон уже не будет таким равномерным. Стороны уступают равное количество места только в том случае, если у них больше места, чем необходимо для отображения их содержимого. Если вы хотите, чтобы центральный текст оставался в центре, несмотря ни на что, поместите max-width в боковые столбцы.

Другие вопросы по теме