Align the contents of the div to the center, but the texts are on the left

Question

I have this code. I want the text to stay centered on the div, but with the alignment on the left. I put a text-align:left, but the text is still centered.

<div style="
width:1000px;
height:400px;
background:red;

display:flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: left;"
>
 <h1>Texto 1</h1>
 <h2>Lorem ipsum dolor sit amet</h2>
</div>

I want it to stay that way:

Answer 1

First, create a core div that will center your child content with text-align: center. Then raise a div child who uses display: inline-block to adapt to the width of their children and text-align: left to make the content align to the left.

<div style="
width:1000px;
height:400px;
background:red;

display:flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: left;">

<div style="display: inline-block; text-align: left;">
  <h1>Texto 1</h1>
  <h2>Lorem ipsum dolor sit amet</h2>
</div>
</div>