Question

尝试使用FlexBox （仅用于演示目的）。但是，我无法在父.top-nav-bar内垂直居中文本。使用justify-content: space-between我可以在水平方向上获取我需要它们的2个元素，但是我没有在.contact内垂直居中.help和.top-nav-bar的运气。所有这样做的尝试似乎都将文本与页面的最顶端对接。

Link To CodePen

HTML：

  header.section1.box
    .top-nav-bar
      .contact
        p Lorem ipsum dolor sit amet
      .help
        p Lorem ipsum dolor sit amet

CSS：

.section1
  background:
    image: url(url/of/image.jpg)
    size: cover
    position: top center
    repeat: no-repeat
    attachment: fixed

.box
  overflow: hidden
  width: 100%
  height: 100vh
  background:
    color: #90281F

.top-nav-bar
  max-width: 1200px
  width: 100%
  height: 40px
  margin: 0 auto
  font-size: 0.813em
  background: pink
  display: flex
  flex-direction: row
  align-items: center
  justify-content: space-between

.contact
  background: red

.help
  background: green

Answer 1

所有这样做的尝试似乎都是针对最重要的文本页面的边缘。

但那就是.top-nav-bar的位置 - 它是一个高度为40px的div（在CSS中定义）并且在HTML之前没有内容，所以它总是位于页。

如果您设置.top-nav-bar { height: 100%; }，那么.top-nav-bar将是其父级（100vh）的高度，然后它的内容可以垂直居中（您使用{{1}正确指示了它}）

align-items: center

    .section1 {
      background: url(url/of/image.jpg) top center no-repeat;
	  background-size: cover;
	  background-attachment: fixed;
	 }

    .box {
      overflow: hidden;
      width: 100%;
      height: 100vh;
      background:#90281F;
	}
    
    .top-nav-bar {
      max-width: 1200px;
      width: 100%;
      height: 100%;
      margin: 0 auto;
      font-size: 0.813em;
      background: pink;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
	 }
      
    .contact {
      background: red
	 }
    
    .help {
      background: green
	 }

使用FlexBox垂直居中元素

1 个答案: