固定 Window 大小；祖布基金会

Question

我目前正在试用 Zurb Foundation，我的 window 尺寸有问题。

<body id="gradient">
        <div id="title" class="small-2 large-6 large-centered text-center  columns">Example</div>    
</body>

目前我将 Example 这个词设置为 large-6 而不是 large-12 因为如果我超过 large-10 那么我的 window 尺寸将增加宽度，导致出现左右滚动。

但是，我认为我已经正确设置了 css 以防止这种情况发生。

html {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

#gradient {    
    background: #00BFFF;
    background: -webkit-linear-gradient(to right bottom, #086A87, #00BFFF);
    background: linear-gradient(to right bottom, #086A87, #00BFFF);
    border-radius: 2px;
    background-size:100% 100%;
    background-repeat: no-repeat;

}

我认为将我的 background-size 设置为 100% 100% 会修复我的 window 并防止任何额外的宽度和高度（因为我不想滚动 up/down/left/right ).

我想解决这个问题的原因是，当我拖动屏幕以从全屏缩小尺寸时，Example 一词将从屏幕中央消失，并更靠近 window所以你看不到这个词。

抱歉，如果这让您感到困惑，如果您需要任何说明，请告诉我。谢谢！

编辑：http://jsfiddle.net/5vdobycy/9/

希望我做对了，如您所见，Example 并不完全居中，因为您可以向右滚动，并且单词的一部分落在纯白色背景中。 jsfiddle 并没有真正显示它在我的浏览器上的显示方式，但这几乎就是我遇到的问题。

但是，不确定我是否没有正确包含 Foundation 还是因为 jsfiddle，但是更改列没有区别，即 large-6 与 jsfiddle 上的 large-12 显示相同。

Answer 1

css

#gradient {
    background: #00BFFF;
    background: -webkit-linear-gradient(to right bottom, #086A87, #00BFFF);
    background: linear-gradient(to right bottom, #086A87, #00BFFF);
    border-radius: 2px;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    position: absolute;
    top: 0;
    left: 0;
    right: 0px;
    bottom: 0px;
    text-align: center;
}
#title{
    padding-top:20%;
    font-size:40px;
}

html

 <body>
    <div id="gradient">
        <div id="title">  Example :)  </div>
    </div>
</body>

Answer 2

使文本居中的最简单方法是使用全角列并在其上应用 text-align: center：

<div id="title" class="small-12 text-center column">Example</div>

您的 fiddle 有多个问题：

你根本没有包括 Foundation

您用

覆盖了列放置

position: absolute;
top: 180px;
left: 400px;

small-2太小了，放不下文字，所以从右边伸出来：

这也是为什么文本没有居中的原因 — 列本身是居中的，但文本只是从居中的列向右转义。

设置 width、height 或 background-size 都不会阻止页面滚动。为此，您需要 overflow CSS 属性.

这是一个有效的简单示例：

#gradient {
    height: 100%;
    background: #00BFFF;
    background: -webkit-linear-gradient(to right bottom, #086A87, #00BFFF);
    background: linear-gradient(to right bottom, #086A87, #00BFFF);
    border-radius: 2px;
    background-size:100% 100%;
    background-repeat: no-repeat;

}
#title {
    font-size: 60px;
    color: #FF8000;
}

<link href="//cdnjs.cloudflare.com/ajax/libs/foundation/5.3.1/css/foundation.min.css" rel="stylesheet" type="text/css">

<div id="gradient">
    <div class="row ">
        <div id="title" class="small-12 text-center column">Example</div>
    </div>
</div>

固定 Window 大小；祖布基金会

Fixed Window Size; Zurb Foundation

html

css

zurb-foundation