w3.css

Question

我正在使用 w3.css。所以你需要这个在你的 header:

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

我想要一个三分之二的容器（颜色为绿色，因此很容易看到），居中于页面中间，但三分之二容器的内部文本出现在容器的左侧。即绿色区域在白色页面的中央，但文字在绿色区域的左侧。

这不起作用（它只出现在左边）：

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

编辑：

这是基于 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>

上面的's'指的是小屏（phones），'m'指的是中屏（平板），'l'指的是大屏。 <div class="w3-row"> 是包含 div 的 3 列 div。在每个 s、m 和 l 中，内部列的总和必须加到 12，因为屏幕被分成 12 个不可见的列。

在我的 'm' 和 'l' 案例中，我拆分了 3 列 1-10-1（必须始终加到 12）。所以我中间的div占了屏幕宽度的10/12。但是，在我的 's' 案例中，我将其拆分为 0-12-0，指示我的中间列占据 phone.

的整个宽度

Answer 1

将 css 应用于容器内的文本。

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>

不过，如果您真的希望它居中，我会删除 w3-two-third.。这限制了它的放置位置。我会推荐像这样的更具响应性的设计：

<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>

Answer 2

classes 必须针对文本对齐方式稍作更改，您需要添加 class 并在 width 后面添加“!important”标签，或者在本例中，内联样式：

<div class="w3-content">
    <div class="w3-container w3-twothird w3-green" style="float: none; margin: 0 auto; width: 66.67% !important;">
        Some profound utterance.
    </div>
</div>

JsFiddle

w3.css - 三分之二的容器，居中，但内部文本在左侧

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

html