Как поместить текст в центр div без использования «text-align: center»?

Question

Здесь демо: https://codesandbox.io/s/priceless-cloud-ommr5

Я бы отправил свой текст на go до центра div, сохранив на пути его выравнивание по левому краю.

Я пробовал:

• margin: auto,
• flexbox с выравниванием по центру,
• x-центрирование по абсолютному позиционированию: все методы тезисов выходит из строя.

Как выровнять текст и сохранить правильное выравнивание текста, как показано на следующем рисунке?

1019 *

Здесь фрагмент ReactJS ':

import React from "react";
import "./styles.css";

export default function App() {
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <div className="align_text">
        <h2>Start editing to see some magic happen!</h2>
      </div>
   </div>
  );
}

Здесь фрагмент CSS':

.App {
  font-family: sans-serif; 
}

h2 {
  width:100vw;

  margin:auto;

  position: absolute;
  left: 50%;
  transform: translate(-50%, 0);

  display:flex;
  justify-content: center;
  align-items: center;

  background:orange;

}

.align_text{
  position:relative;

  width:100vw;

  display:flex;
  justify-content: center;
  align-items: center;
}

Answer 1

Попробуйте это css,

    .App {
  font-family: sans-serif;
}

h2 {
  width: 100vw;

  margin: auto;

  position: absolute;
  left: 50%;
  transform: translate(-50%, 0);

  display: flex;

  background: orange;
}

.align_text {
  position: relative;
  width: 100vw;

  display: block;
}

h2 {
  padding: 10px;
  display: block;
  width: 50%;
  margin: auto;
}

Answer 2

В этой ситуации должно быть достаточно присвоить дочернему абзацу margin.

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

Я дал ему поле, равное 10% ширины родительского элемента <div>.

NB Вы можете активно изменить размер <div> - взяв и переместив нижний правый угол - вы увидите, как <p> перемещается и изменяет размеры внутри него, как и вы.

Рабочий пример:

body {
  background-color: rgb(255, 238, 244);
}

div {
  width: 300px;
  height: 180px;
  border: 3px solid rgb(0, 0, 0);
  resize: both;
  overflow: hidden;
}

div p {
  margin: 10%;
  font-size: 24px;
  border: 1px dashed rgba(255, 0, 0, 0.5);
}

<div>
<p>Here is a left-aligned text at the center of the div.</p>
</div>

Answer 3

Flexbox - хороший способ добиться этого. Вы допустили ошибку, применив flexbox к самим текстовым элементам, а не к классу .App, а затем заверните все в .App в другой div.

Для вашей песочницы это решение:

export default function App() {
  return (
    <div className="App">
     <div>
      <h1>Hello CodeSandbox</h1>
      <div className="align_text">
        <h2>Start editing to see some magic happen!</h2>
      </div>
     </div>
   </div>
  );
}

Стили

.App {
  font-family: sans-serif; 
  display: flex;
  width: 100%;
  justify-content:center;
}

h2 {
  background:orange;

}