Question

我正在尝试设置一个登陆欢迎页面，它将填充用户浏览器的整个视口。我想在它上面有一些居中的内容，可能是某些文字或某种幻灯片。我以前把内容集中在一起，这不是真正的问题。我还需要将导航栏固定到元素的底部。我不能使用绝对定位因为当我滚过它时我需要它粘在窗口的顶部。我试过用flexbox做这个，但遇到了很多问题。首先是导航栏从中间开始，第二个是中心内容不在中间，它似乎位于中心右侧。

这是我正在使用的CSS：

html, body {
    width: 100%;
    height: 100%;
}

.navbar {
    margin-bottom: 0;
    width: 100vw;
}

.full-size {
    height: 100vh;
}

#page-welcome {
    background: url(http://placekitten.com/1920/1080);
    -moz-background-size: cover;
    -o-background-size: cover;
    -webkit-background-size: cover;
    background-size: cover;
}

.align {
    display: flex;
    justify-content:center;
    align-items: center;
    height:100%;
}
.align > .end{
    align-self:flex-end;
}
.align > .top{
    align-self:flex-start;
}

我还有一个CodePen，可以在这里演示我的问题： http://codepen.io/anon/pen/GCpzE

Answer 1

默认情况下，方向设置为 row ，但您需要的是列。

http://codepen.io/cimmanon/pen/bCDfL

html, body {
  width: 100%;
  height: 100%;
}

.navbar {
  margin-bottom: 0;
  width: 100vw;
}

.full-size {
  height: 100%;
  height: 100vh;
}

#page-welcome {
  background: url(http://placekitten.com/1920/1080);
  -moz-background-size: cover;
  -o-background-size: cover;
  -webkit-background-size: cover;
  background-size: cover;
}

.align {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  -webkit-align-items: center;
  align-items: center;
  height: 100%;
}

我在演示中添加了一个额外的元素，以便您可以看到它将垂直居中（尽管它的接近完全居中取决于其他元素的高度）。

对元素中的内容进行居中，并将导航栏锁定到底部（使用flexbox？如何？）

1 个答案: