gpt4 book ai didi

html - 居中堆叠绝对元素+居中 flex 列垂直于窗口高度

转载 作者:行者123 更新时间:2023-11-28 04:21:37 27 4
gpt4 key购买 nike

我正在尝试编写培训网站的代码,但有 2 个问题我不知道如何解决。

第一个:左侧的那 3 个按钮 (.side-buttons) 应该位于窗口高度的中间(垂直)。

第二个:有一个 .headline div,它包含一个 .svg 元素和一个应该堆叠起来并位于该 .svg 元素中间的标题。我考虑过制作 .svg 元素 position: relative; 并给标题 position: absolute;,但我不知道如何在高度时将它居中未定义。我该怎么做呢?或者有更简单的方法吗?

现在看起来怎么样(不要看字体大小,我稍后会更正)

How it looks like right now (don't look at the font sizes, I'll correct that later)

它应该是什么样子:

enter image description here

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>

最佳答案

制作body display: flex;,并设置.welcome-screenflex-grow: 1;,左侧的图标将垂直居中。然后在body上设置flex-wrap: wrap;,在.intro-section上设置width: 100%;该部分显示在 .welcome-screen 下方。然后在.headline中添加position: relative,添加top: 50%;左: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>

关于html - 居中堆叠绝对元素+居中 flex 列垂直于窗口高度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42179124/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com