修復頁腳底部（無標題）

我仍然在學習CSS，如果你能夠找到一個解決方案，你可以提供一個例子，我在哪裏把新的CSS或刪除。我已經嘗試了至少30種不同的東西，並且找不到可用的東西。修復頁腳底部（無標題）

我有我的屏幕文字居中沒有標題，但我想強制第二個文本下面的底部。

這裏有一個圖片，以幫助代表我的設置：

這是一些我到文本居中的代碼（我想保持它的影響，因爲可能所以無論是居中的文本和頁腳的工作只是精）

<div class="centered"> 
    <h1>Main text</h1> 
</div> 
<h3 class="footer">Sub text</h3>

這是我竟能在CSS：

.centered { 
position:absolute; 
top: 50%; 
left: 50%; 
transform: translate(-50%, -50%); 
} 

.footer { 
    position:fixed; 
    bottom:0; 
    clear:both; 
    height:75px; 
}

就像我說的居中文字工作正常前夕n當我調整頁面時，它仍然保持中心位置，我只想要一個下面的頁腳，它將保持固定在底部。謝謝你的任何幫助大加讚賞〜

來源

2016-08-12 GBF

你已經做到了！

.footer { 
    position: fixed; 
    bottom: 0; 
    clear: both; 
    height: 75px; 
    left: 0; 
    right: 0; 
    text-align: center; 
    margin: 0; 
}

.centered { 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    transform: translate(-50%, -50%); 
 
} 
 
.footer { 
 
    position: fixed; 
 
    bottom: 0; 
 
    clear: both; 
 
    height: 75px; 
 
    left: 0; 
 
    right: 0; 
 
    text-align: center; 
 
    margin: 0; 
 
}

<div class="centered"> 
 
    <h1>Main text</h1> 
 
</div> 
 
<h3 class="footer">Sub text</h3>

來源

2016-08-12 02:17:16 kukkuz

謝謝你，在它被卡在屏幕的頂部而不是中心文本之前，但這次它工作得很好。 – GBF

Methord 1：

按我的知識（原諒如果我錯了），你應該有一個相對於使用絕對。至於你想要居中的文本，你可以通過使用你想放置的內部部分來完成它。我已經使用了填充，因爲我沒有這裏的內部部分。

.centered { 
 
text-align: center; 
 
padding-top: 80px; 
 
position: relative; 
 
} 
 

 
.footer { 
 
position: absolute; 
 
clear: both; 
 
bottom: 0; 
 
left: 0; 
 
right: 0; 
 
text-align: center; 
 
}

<div class="centered"> 
 
    <h1>Main text</h1> 
 
</div> 
 
<h3 class="footer">Sub text</h3>

Methord 2：你也可以去通過flexbox，因爲它有更少的性能，易於使用，將響應。

來源

2017-09-01 09:21:51

修復頁腳底部（無標題）

回答

相關問題