Question

我使用this线程垂直居中我网站页面上的元素。它有效，但在顶部留下了大空的空间，我无法弄清楚原因。

＆＃13;

.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{
	text-align: center;
	position: absolute;
	left: 0px;
	padding-top: 80px;
	margin: 0 5%;
	width: 90%; /* 738px fixed*/
	opacity: 0;
}

.cn-slide:target{
	opacity: 1;
	z-index: 1000;
}

＆＃13;

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

＆＃13;

网站为http://www.glamparrucchieria.com

Answer 1

您错误地假设您的.cn-slide元素及其position: absolute将参与正常的布局流程，扩展其容器高度并在必要时在顶部和底部分配额外空间。他们不做那些事情 - 他们绝对定位并且不会影响.cn-container元素的大小。这几乎就好像他们根本不存在一样。

这就是为什么你看到你看到的东西 - .cn-container的高度为零，幻灯片只是在视觉上悬挂，如果它们是静态定位的话。如果你指定了left，top，right或bottom，你就可以自由地移动它们，最近的绝对或相对定位的祖先元素（或角落）文件）用于枢轴。

如果你可以想象的话，有点像每个幻灯片上面有一个视觉透明层，而且所有幻灯片都在页面的其余部分前面。

您最安全的选择是从position: absolute规则中移除.cn-slide来放弃绝对定位，并将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"。

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

1 个答案: