Centering left-aligned text

Question

I want to center left-aligned text in the yellow box (txtbox). It looks like that now:

and it want it to be looking like this:

HTML:

       <div class="content container small">
                    <div class="txtbox">
                        <header style="text-align:left;">
                            <h2>I AIN'T</h2>
                            <h2>AN ARTIST.<h2>
                            <h2>I'M A</h2>
                            <h2>BEAST!</h2>
                        </header>
                    </div>
                <footer>
                    <a href="#one" class="button style2 down">More</a>
                </footer>
        </div>

CSS:

.container.small {
    /* width: (containers) * 0.75; */
    width: 900px;
}
.txtbox{
    width:800px;
    margin:0 auto;
    background-color:yellow;
    text-align:center;
}

Answer 1

.txtbox header h2{
    padding-left: 50px;
}

Answer 2

.txtbox header {
    display: grid;
    grid-template-columns: 1fr; 
    width: fit-content;
    margin: auto;
    background-color: yellow;
    text-align: left;
    align-items: center;
}

This will put your text in a box. Align the text to the left of the box and fitting the box for the text you have. Then it will center the box. This also works when you don't know the width or height.

And remove

style="text-align:left;"

out of the header.

Answer 3

Get rid of the inline style in your

<header style="text-align:left;">

it overrides the stylesheet; leave just

<header>

Answer 4

header h2 { position: relative; left : 30% /* percentage of yellow box */; }

Answer 5

It took me a little bit to figure out what "centered left-aligned" text mean.

If I understand you correctly, You want the text to be left-aligned on a vertical axis, but centered on the page.

If that is what you want than you can do that by centering your inner header tag like so: width: 132px; margin: 0 auto; width: 132px; margin: 0 auto;

Here's a fiddle to demonstrate: http://jsfiddle.net/u4sj7/

Answer 6

                <div class="txtbox">
                  <div class="centerblock">
                    <header style="text-align:left;">
                        <h2>I AIN'T</h2>
                        <h2>AN ARTIST.<h2>
                        <h2>I'M A</h2>
                        <h2>BEAST!</h2>
                    </header>
                  </div>
                </div>

CSS:

.centerblock {
    display:inline-block;
    margin:auto;
}

Answer 7

HTML:

<div class="content container small">
    <div class="txtbox">
        <header>
             <h2>I AIN'T</h2>
             <h2>AN ARTIST.</h2>
             <h2>I'M A</h2>
             <h2>BEAST!</h2>
        </header>
    </div>
    <footer> <a href="#one" class="button style2 down">More</a>

    </footer>
</div>

Add this to CSS:

.txtbox header {
    display: block;
    margin: 0 auto;
}