垂直居中的元素在顶部留下空的空间

-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

垂直居中的元素在顶部留下空的空间

回答

相关问题