Представьте два прямоугольных DIV рядом. Скажем, левый имеет красный цвет фона, а правый имеет синий цвет фона. Ради аргумента скажем, что каждый имеет ширину 250 пикселей. Высота изменяется в зависимости от содержимого внутри, но обычно составляет от 100 до 300 пикселей.

Я хочу отобразить один символ, знак равенства, который находится точно в центре - т.е. расположен вертикально по центру и занимает 50% на красном DIV и 50% на синем DIV.

Чтобы найти решение, я сделал это:

  • Установите для красного DIV ширину = col-4

  • Добавлен центральный DIV, также красный, с шириной = col-1

  • Установите синий DIV в width = col-5

Центр DIV содержит знак равенства, размер которого составляет 50 х 50 пикселей, и вокруг него есть круг.

По центру по вертикали я установил в центральном столбце display: flex и align-items: center. Это хорошо работает.

Но, как я ни старался, я не мог изменить характер, что бы я ни пытался. Я подозреваю, что это может быть потому, что я использую flex в родительском DIV.

Есть идеи, как создать работоспособное решение?

css
1
Robert Werner 1 Май 2019 в 17:34

3 ответа

Лучший ответ

Добавьте следующий CSS в центр div:

display: flex;
justify-content: center;
flex-direction: column;
text-align: center;

То, что вы делаете здесь, делает вертикальное направление flex, а затем вы делаете текст вертикально по центру после выравнивания текста: center

2
Ankur Choudhury 1 Май 2019 в 15:03

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

Если центральный div имеет ширину 50px, то все, что вам нужно сделать, это установить поля на -25px и убедиться, что z-индекс выше, чем div после него на странице.

Я попробовал следующий код, и он, казалось, делал то, что вы хотите.

<div style="display:flex; align-items:center;">
  <div style="background:#f00; font-size:300px"> A </div>
  <div style="width:50px; margin:-25px; z-index:1; font-size:100px">=</div>
  <div style="background:#00f; font-size:500px"> B </div>
</div>

Вы, вероятно, захотите, чтобы этот CSS был отделен от разметки. Если центральным элементом является изображение, вам не нужно оборачивать его в div. Просто примените CSS к изображению.

1
Andrew Paul 1 Май 2019 в 14:57

Большое спасибо Эндрю Полу и Анкуру Чоудхури. Я использовал комбинацию ваших ответов, чтобы создать рабочее решение.

Код макета

<div className={`col-1 ${cn.CenterColumn}`}>
    <div className={cn.Equal}>
        =
    </div>
</div>

Код CSS

CenterColumn: css({
    display: 'flex',
    flexDirection: 'column',
    alignItems: 'center',
    justifyContent: 'center',
    border: '0.063em solid rgba(0, 0, 0, 0.1)',
    borderLeft: 'none',
    backgroundColor: '#ececec',
    zIndex: 1
}),

Equal: css({
    backgroundColor: 'black',
    width: '50px',
    height: '50px',
    borderRadius: '50px',
    fontSize: '50px',
    color: '#fff',
    lineHeight: '50px',
    textAlign: 'center',
    marginRight: '-78px'
}),

Примечание. Приведенный выше код CSS находится внутри файла styles.ts в моем компоненте React.

1
Robert Werner 1 Май 2019 в 15:26