固定窗口大小；祖爾布基金會

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並沒有真正顯示它在瀏覽器中的顯示方式，但這幾乎就是我遇到的問題。

但是，不確定我是否包括Foundation權利，還是因為jsfiddle，但是在更改列方面沒有區別，即， large-6在jsfiddle上顯示與large-12相同。

Answer 1

使文本居中的最簡單方法是使用全角列並應用text-align: center以它們為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>

固定窗口大小；祖爾布基金會

問題描述

2 個解決方案

解決方案1
2 已采納 2015-03-31 09:53:24

解決方案2
-1 2015-03-29 09:06:33

固定窗口大小； 祖爾布基金會

問題描述

2 個解決方案

解決方案1 2 已采納 2015-03-31 09:53:24

解決方案2 -1 2015-03-29 09:06:33

固定窗口大小；祖爾布基金會

解決方案1
2 已采納 2015-03-31 09:53:24

解決方案2
-1 2015-03-29 09:06:33