垂直居中的元素在頂部留下空的空間

-1

我用this線程垂直居中我網站頁面上的元素。它的工作原理，但在頂部留下了大量的空白空間，我不知道爲什麼。垂直居中的元素在頂部留下空的空間

.wrappert { 
 
    height: 100%; 
 
    width: 100%; 
 
    display: table; 
 
} 
 

 
.wrapper { 
 
    height: 100%; 
 
    vertical-align: middle; 
 
    display: table-cell; 
 
    text-align: center; 
 
} 
 

 
.cn-container { 
 
    width: 60%; 
 
    /* min-width: 600px; */ 
 
    max-width: 820px; 
 
    margin: 10px auto 0 auto; 
 
    text-align: left; 
 
    position: relative; 
 
} 
 

 
.cn-slide{ 
 
\t text-align: center; 
 
\t position: absolute; 
 
\t left: 0px; 
 
\t padding-top: 80px; 
 
\t margin: 0 5%; 
 
\t width: 90%; /* 738px fixed*/ 
 
\t opacity: 0; 
 
} 
 

 
.cn-slide:target{ 
 
\t opacity: 1; 
 
\t z-index: 1000; 
 
}

<div class="wrappert"> 
 
    <div class="wrapper"> 
 
    <div class="cn-container"> 
 
     <div class="cn-slide" id="slide-main">Lorem ipsum dolor sit amet.</divv> 
 
     <div class="cn-slide" id="slide-main">Nam dapibus euismod ex egestas dictum.</divv> 
 
     <div class="cn-slide" id="slide-main">Interdum et malesuada fames ac ante ipsum primis in faucibus.</divv> 
 
    </div> 
 
    </div> 
 
</div>

該網站是http://www.glamparrucchieria.com

來源

2017-05-04 Ponzaro

發佈您的代碼。但這就是垂直居中對不對？它在上面和下面留下空隙。 – StefanBob

當然，但是如果它不是中心的話，上下的差距應該是相等的 – Ponzaro

@Ponzaro，我的不好。誤解了這個問題。 – lU5er

您錯誤地假設你的.cn-slide元素，用自己position: absolute，將參與佈局的正常流動，擴大其集裝箱的高度和分配額外的空間在頂部和底部，如有必要。他們將而不是做那些事 - 他們是絕對定位的，並且不會影響您的.cn-container元素的大小。就好像他們根本就沒有。

這就是爲什麼你看到你所看到的 - .cn-container的高度爲零，並且幻燈片只是視覺上懸掛，如果它們是靜態定位的話。如果您指定了left，top，right或bottom，您可以自由移動它們，並使用最近的絕對或相對定位的祖先元素（或文檔的角落）來旋轉。

這有點像您爲每張幻燈片放置了一個視覺透明圖層，並且在您的頁面的其他部分前面都有，如果您能想象的話。

你最安全的賭注是從.cn-slide規則刪除position: absolute放棄絕對定位，並應用display: none到了需要從視圖中隱藏你的那些「不活躍」的幻燈片，只顯示出一個「積極的」幻燈片（:target）與display: block：

.cn-slide { 
    display: none; /** 'disable' each slide */ 
    position: initial; /** or just make sure there is no absolute positioning, this is just to illustrate static positioning, if you don't have `position: absolute` applying for this selector, you don't need this rule. */ 
} 
.cn-slide:target { 
    display: block; /** enable the 'current' slide */ 
}

將上面的等價，你的頁面應該看起來像你想讓它。請記住，絕對定位在前面或其他頁面元素後面創建了一個新層，簡單地說就是。如果你想學習理論，請閱讀"CSS basic box model"。

來源

2017-05-04 19:35:10 amn

垂直居中的元素在頂部留下空的空間

回答

相關問題