Rewind Rewind - 5 months ago 51
HTML Question

w3.css - A twothird container, centered, but with the internal text on the left

I am using w3.css. So you need this in your header:

<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">


I want to have a twothird container (coloured green so it is easy to see it), centered in the middle of the page, but with the internal text of the twothird container appearing on the left of the container. Ie the green area is central in the white page, but the text is on the left of the green area.

This does not work (it just appears on the left):

<div class="w3-container w3-center">
<div class="w3-container w3-twothird w3-left w3-green">
Some profound utterance.
</div>
</div>


Edit:

This is the solution based on the idea presented by albydamed.

<div class="w3-row">
<div class="w3-col w3-container s0 m1 l1"></div>
<div class="w3-col w3-container s12 m10 l10 w3-green" style="text-align: left;">
Some profound utterance
</div>
<div class="w3-col w3-container s0 m1 l1"></div>
</div>


In the above 's' refers to small screens (phones), 'm' refers to medium screens (tablets) and 'l' refers to large screens.
<div class="w3-row">
is the containing div for 3 column divs. In each of s, m and l the sum of the internal columns must add to 12, as the screen is split into 12 invisible columns.

In my 'm' and 'l' case I split the 3-columns 1-10-1 (must always add to 12). So my middle div takes up 10/12 of the screen width. However, in my 's' case I split it 0-12-0, instructing my middle column to take up the full width of the phone.

Answer

Apply css to the text inside your container.

CSS:

.left {
    text-align: left;
}

HTML:

<div class="w3-container w3-center">
    <div class="w3-container w3-twothird w3-green">
        <p class="left">Some profound utterance.</p>
    </div>
</div>

Although, if you really want it centered I would remove w3-two-third. That restricts where it is placed. I would recommend a more responsive design like this:

<div class="w3-row">
    <div class="w3-container w3-quarter"></div>
    <div class="w3-container w3-green w3-half">
        <p class="left">Some profound utterance.</p>
    </div>
    <div class="w3-container w3-quarter"></div>
</div>