Question

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

我的文字是居中对齐的，但是应用仅限于show的大型课程（或小/中）会对齐左边的文字。我似乎无法改写这一点。

这是我的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-up-up和相关课程适用display: inherit !important;，它会覆盖您的display: table。结果，整个div缩小到它可以的最小宽度（只要大到足以适合文本），使其在容器内保持对齐。

无论显示的值如何，文本本身在所有场景中都显示为左对齐。您需要text-align: center来更改（或者您可以应用像large-text-left这样的基础课程。）

Zurb类show-for-large-only对齐剩下的所有文本

1 个答案: