Двухколонный гибкий макет, выравнивание содержимого по центру

Question

С этим кодом:

.row {
  display: flex;
  text-align: center;
}

.col {
  flex: 1;
}

<div class='row'>
  <div class='col'>
    <h1>Left</h1>
    <h2>Some longer text</h2>
  </div>
  <div class='col'>
    <h1>Right</h1>
    <h2>Some longer text</h2>
  </div>
</div>

Я получаю вывод вроде

------------------------------------------------------------------
|            Left               |             Right              |
|       Some longer text        |       Some longer text         |
------------------------------------------------------------------

(пунктирные линии, воображаемые для отображения контейнеров).

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

------------------------------------------------------------------
|                 Left        |       Right                      |
|           Some longer text  |  Some longer text                |
------------------------------------------------------------------

Как я могу добиться этого?

Answer 1

Вы можете просто justify-content как center в строке.

.row {
  display: flex;
  text-align: center;
  justify-content: center;
}
.col {
  padding: 0.5rem;
}

<div class='row'>
  <div class='col'>
    <h1>Left</h1>
    <h2>Some longer text</h2>
  </div>
  <div class='col'>
    <h1>Right</h1>
    <h2>Some longer text</h2>
  </div>
</div>

Answer 2

Простым решением было бы разместить отступы на столбцах.Левый отступ в левом столбце и правый отступ в правом столбце.В этом примере используются проценты.Ограничением этого является то, что когда текст будет длиннее, он будет перенесен и не займет всю ширину своего контейнера.В своем вопросе вы упомянули padding, так что, возможно, вы попробовали это.

Пример

.row {
  display: flex;
}

.col {
  flex: 1;
  text-align: center;
}

.col:nth-child(1) {
  padding-left: 20%;
}

.col:nth-child(2) {
  padding-right: 20%;
}


/*for example*/
.col {
  border: solid 1px #FEF;
  padding: 20px;
}

<div class='row'>
  <div class='col'>
    <h1>Left</h1>
    <h2>Some longer text</h2>
  </div>
  <div class='col'>
    <h1>Right</h1>
    <h2>Some longer text</h2>
    <p>Really long text that might break break break break break break break break break break break break break break break break everything!</p>
  </div>
</div>

Answer 3

Найдите прилагаемую скрипку

. Вы можете использовать align-items: center для вертикального выравнивания по центру или, а затем для горизонтального выравнивания, использовать align-self по определенному элементу для flex-start, flex-end или center.

Просто добавьте сюда код CSS.

.row {
  display: flex;
  margin: 0 -15px;
}

.col {
    flex: 1;
    flex-flow: column wrap;
    align-items: center;
    display: flex;
    padding: 0 15px;
}
.col:first-child h1,
.col:first-child h2{
align-self: flex-end;
}
.col:last-child h1,
.col:last-child h2{
align-self: flex-start;
}