垂直居中堆叠绝对元素+定位挠性柱到窗口高度

我试图编码一个培训网站，我有两个问题，我不知道如何解决。垂直居中堆叠绝对元素+定位挠性柱到窗口高度

1st：左侧的3个按钮（.side-buttons）应该位于窗口高度的中间（垂直方向）。

第二种：有一个.headline div，它包含一个.svg元素和一个标题，该标题应该堆叠并放置在该.svg元素的中间。我曾考虑制作.svg元素position: relative;，并给出标题position: absolute;，但我不知道如何在高度未定义时将其居中。我该怎么做呢？还是有更简单的方法来做到这一点？

它的外观像现在（不看的字体大小，以后我会改正）

究竟应该如何样子：

body, html { 
 
    margin: 0; 
 
    font-family: 'Work Sans', sans-serif; 
 
    box-sizing: border-box; 
 
} 
 
.welcome-screen { 
 
    background-color: Lightblue; 
 
    background-size: cover; 
 
    height: 90vh; 
 
    margin: 3.5em; 
 
    box-sizing: border-box; 
 
    display: flex; 
 
    flex-direction: column; 
 
    align-items: center; 
 
    justify-content: center; 
 
} 
 
.side-buttons { 
 
    float: left; 
 
    display: flex; 
 
    flex-direction: column; 
 
    justify-content: center; 
 
} 
 
.side-buttons img { 
 
    height: 2em; 
 
    padding: 0.5em 0 0.5em 0.5em; 
 
    display: block; 
 
} 
 
.side-buttons a { 
 
    text-decoration: none; 
 
} 
 
.headline { 
 
    display: block; 
 
    width: 100%; 
 
} 
 
.headline img { 
 
    width: 50%; 
 
    position: relative; 
 
} 
 
.headline h1 { 
 
    position: absolute; 
 
    z-index: 99; 
 
} 
 
nav { 
 
    text-align: center; 
 

 
} 
 
nav a { 
 
    color: white; 
 
    text-decoration: none; 
 
} 
 
nav a:hover { 
 
    color: black; 
 
} 
 
.headline { 
 
    text-align: center; 
 
} 
 

 
.intro-section { 
 
    height: 300px; 
 
    background-color: grey; 
 
}

<body> 
 
<!-- header section --> 
 
    <!-- side buttons --> 
 
    <div class="side-buttons"> 
 
    <a href="http://pinterest.com/"> 
 
     <img src="http://placehold.it/40x40" alt="pinterest icon"> 
 
    </a> 
 
    <a href="http://facebook.com/"> 
 
     <img src="http://placehold.it/40x40" alt="facebook icon"> 
 
    </a> 
 
    <a href="http://twitter.com/"> 
 
     <img src="http://placehold.it/40x40" alt="twitter icon"> 
 
    </a> 
 
    </div> 
 
    <!-- end of side buttons --> 
 
    
 
<section class="welcome-screen"> 
 
    <div class="headline"> 
 
    <h1>The time is</h1> 
 
    <img src="css/assets/now.svg" alt="now"> 
 
    </div> 
 

 
    <nav> 
 
    <a href="">intro</a> 
 
    <a href="">gallery</a> 
 
    <a href="">services</a> 
 
    <a href="">contact</a> 
 
    </nav> 
 
</section> 
 
<!-- end of header section --> 
 

 
<section class="intro-section"> 
 

 
</section> 
 

 
</body>

来源

2017-02-11 Tomasz Czechowski

让bodydisplay: flex;，并设置.welcome-screen到flex-grow: 1;，你的左边的图标将被垂直居中。然后在.intro-section的body和width: 100%;上设置flex-wrap: wrap;，该部分在.welcome-screen下显示。然后将position: relative添加到.headline并将top: 50%; left: 50%; transform: translate(-50%,-50%);添加到您的h1，它将以svg为中心。

body, html { 
 
    margin: 0; 
 
    font-family: 'Work Sans', sans-serif; 
 
    box-sizing: border-box; 
 
} 
 
body { 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
} 
 
.welcome-screen { 
 
    background-color: Lightblue; 
 
    background-size: cover; 
 
    height: 90vh; 
 
    margin: 3.5em; 
 
    box-sizing: border-box; 
 
    display: flex; 
 
    flex-direction: column; 
 
    align-items: center; 
 
    justify-content: center; 
 
    flex-grow: 1; 
 
} 
 
.side-buttons { 
 
    float: left; 
 
    display: flex; 
 
    flex-direction: column; 
 
    justify-content: center; 
 
} 
 
.side-buttons img { 
 
    height: 2em; 
 
    padding: 0.5em 0 0.5em 0.5em; 
 
    display: block; 
 
} 
 
.side-buttons a { 
 
    text-decoration: none; 
 
} 
 
.headline { 
 
    display: block; 
 
    width: 100%; 
 
    position: relative; 
 
} 
 
.headline img { 
 
    width: 50%; 
 
    position: relative; 
 
} 
 
.headline h1 { 
 
    z-index: 99; 
 
    margin: 0; 
 
    position: absolute; 
 
    top: 50%; left: 50%; 
 
    transform: translate(-50%,-50%); 
 
} 
 
nav { 
 
    text-align: center; 
 

 
} 
 
nav a { 
 
    color: white; 
 
    text-decoration: none; 
 
} 
 
nav a:hover { 
 
    color: black; 
 
} 
 
.headline { 
 
    text-align: center; 
 
} 
 

 
.intro-section { 
 
    height: 300px; 
 
    background-color: grey; 
 
    width: 100%; 
 
}

<body> 
 
<!-- header section --> 
 
    <!-- side buttons --> 
 
    <div class="side-buttons"> 
 
    <a href="http://pinterest.com/"> 
 
     <img src="http://placehold.it/40x40" alt="pinterest icon"> 
 
    </a> 
 
    <a href="http://facebook.com/"> 
 
     <img src="http://placehold.it/40x40" alt="facebook icon"> 
 
    </a> 
 
    <a href="http://twitter.com/"> 
 
     <img src="http://placehold.it/40x40" alt="twitter icon"> 
 
    </a> 
 
    </div> 
 
    <!-- end of side buttons --> 
 
    
 
<section class="welcome-screen"> 
 
    <div class="headline"> 
 
    <h1>The time is</h1> 
 
    <img src="css/assets/now.svg" alt="now"> 
 
    </div> 
 

 
    <nav> 
 
    <a href="">intro</a> 
 
    <a href="">gallery</a> 
 
    <a href="">services</a> 
 
    <a href="">contact</a> 
 
    </nav> 
 
</section> 
 
<!-- end of header section --> 
 

 
<section class="intro-section"> 
 

 
</section> 
 

 
</body>

来源

2017-02-11 18:00:39

好，.side-按钮现在正确定位，但文本仍然不在.SVG元素的中间。我在修复之后注意到的另一件事是，下一部分（页面底部的'.intro-section'）消失了。这可能是因为“display：flex;”被添加到body中，但是当我将'width：100％;'添加到'.intro-section'时（它会打破这一行，对吗？）它收缩所有内容并显示最后一部分放在页面的右侧，而不是放在下面（就像普通部分一样）。 –

@TomaszCzechowski更新了我的答案。 –

赞美全能的迈克尔科克！他知道所有的答案！ –

变化position在img与h1

.headline img { 
    width: 50%; 
    position: absolute; 
} 
.headline h1 { 
    position: relative; 
    z-index: 99; 
}

来源

2017-02-11 17:59:05

垂直居中堆叠绝对元素+定位挠性柱到窗口高度

回答

相关问题