html - Zurb 类 show-for-large-only 将所有文本左对齐

Question

我正在构建一个使用 show-for-XXXX-only 类的小型网站。

我的文本是居中对齐的，但是应用 show-for-large-only 类(或小/中)会使文本左对齐。我似乎无法覆盖它。

这是我的 HTML:

        <div class="content">

        <div class="row">

            <div>

                <div class="large-offset-2 large-8 small-offset-2 small-8 columns">
                    <div class="hero-table show-for-large-up">
                        <div class="hero-copy">
                            Here is my text. It keeps aligning left!
                        </div>
                    </div>
                </div>

            </div>

        </div>

    </div>

这是我的 CSS:

.hero-table {
        display: table;
        width: 100%;
        height: 320px;
        }

.hero-copy  {
            display: table-cell;
            vertical-align: middle;
            font-family: "adobe-garamond-pro",serif;
            font-size: 22px;
            -webkit-font-smoothing: antialiased;
            font-style: italic;
            font-weight: 400;
            color: #f2f2f2;
            height: 320px;
            background-color: red;
            }

我想知道我用来垂直对齐内容的表格代码是否与 Zurb 类冲突。

Answer 1

show-for-large-up 和相关类应用 display: inherit !important;，它会覆盖您的 display: table。结果，整个 div 缩小到它可以达到的最小宽度(刚好足以容纳文本)，使其在其容器内左对齐。

无论 display 的值如何，文本本身在所有情况下都显示为左对齐。您将需要 text-align: center 来更改它(或者您可以应用像 large-text-left 这样的基础类)。