How to center text in the DIV making the lines line up on the left?

Question

I have a <div> with the property text-align: center; so that the text is centralized, but I want the lines of the texts to always start on the left.

Below is an example of what I want:

             <DIV>               
-----------------------------
|                           |
|      Olá pessoal          |
|      Este é um exemplo.   |
|      Do que eu quero.     |
|                           |
-----------------------------

How can I do that? Is it possible? The code I’m using is this:

#myDiv {
    text-align: center;
}

<div id="myDiv">
    <!-- Alguns outros elementos... -->
    <div id="info">
        Dado 1: 334<br>Dado 2: 192.2<br>Dado 3: 3455.234
    </div>
</div>

Answer 1

You can simply create a sub-element that is display: inline-block;, the element with inline-block will not occupy "100%", do not specify measure, just let the text adjust it, then it should look like this:

#myDiv {
    text-align: center;
}

#info {
    text-align: left;
    display: inline-block;
}

<div id="myDiv">
    <!-- Alguns outros elementos... -->
    <div id="info">
        Dado 1: 334<br>Dado 2: 192.2<br>Dado 3: 3455.234
    </div>
</div>

If you’re really going to use other elements before the #info you can use a simple <br> to separate:

#myDiv {
    text-align: center;
}

#info {
    text-align: left;
    display: inline-block;
}

<div id="myDiv">
    <!-- Alguns outros elementos... -->
    <p>foo</p>
    <p>bar</p>
    <p>baz</p>

    <br>

    <div id="info">
        Dado 1: 334<br>Dado 2: 192.2<br>Dado 3: 3455.234
    </div>
</div>

Or you can create a "sub-div" inside #info and apply to it the display: inline-block; instead of applying on #info