Question

我目前正在尝试Zurb Foundation并且我的窗口大小有问题。

<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，那么我的窗口大小会增加，导致左右滚动显示。

然而，我认为我已经正确设置了我的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％会修复我的窗口并防止任何额外的宽度和高度（如我不想向上/向下/向左/向右滚动）。

原因我想解决的问题是，当我拖动屏幕以减小全屏尺寸时，单词Example将从屏幕中央消失，并保持更靠近窗口的右侧，因此您看不出这个词。

对不起，如果这令人困惑，请告诉我您是否需要任何澄清。谢谢！

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

希望我做得对，因为你可以看到Example并不完全居中，因为你可以滚动到右边，而单词的一部分落在纯白色的背景中。 jsfiddle没有显示它在浏览器上的显示方式，但几乎就是我遇到的问题。

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

Answer 1

将文本置于中心的最简单方法是使用全角列并对其应用text-align: center：

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

你的小提琴有很多问题：

你没有包括基金会

您使用

覆盖列位置

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>

Answer 2

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

固定窗口尺寸; Zurb基金会

2 个答案: