如何将段落中心放在导航栏下方

debugcn 发表于 Dev

夸·比尼

我navbar在页面顶部创建了一个，我想将其下面的一些段落居中。段落居中，但在页面下方。如何将它们恢复到向下滚动可见的视图。本质上，rowand coldiv

<div class="container">
<div class="navbar">
  <img src="images/logo.png" class="logo">
  <nav>
      <ul>
          <li><a href="{% url 'home' %}">Home</a></li>
          <li><a href="{% url 'login' %}">Login</a></li>
      </ul>
  </nav>
  </div>
</div>

<div class="row">
<div class="col">
  <h1>Sparison</h1>
  <P>Music Matching With Love ❤️ </P>
</div>
</div>

我试过的CSS是；

.col{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
min-height: 0vh;
}

*{
 margin : 0;
 padding: 0;
 font-family: 'Roboto', sans-serif;
 }

.container{
width: 100%; 
height: 100vh;
background-position: center;
background-size: cover;
padding-left: 8%;
padding-right: 8%;
box-sizing: border-box ;
}

.navbar{
height: 12%;
display: flex;
align-items: center;
}

nav{
flex: 1;
text-align: right;
}


nav ul li{
list-style: none;
display: inline-block;
margin-left: 60px;
}

nav ul li a{
text-decoration: none;
color:black;
font-size: 13px;
}

0石0

您在height: 100vh;上有.container，这就是为什么内容被强制删除。height: 20vh;在容器上使用类似的东西：

.col{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
min-height: 0vh;
}

*{
 margin : 0;
 padding: 0;
 font-family: 'Roboto', sans-serif;
 }

.container{
width: 100%; 
height: 20vh;
background-position: center;
background-size: cover;
padding-left: 8%;
padding-right: 8%;
box-sizing: border-box ;
}

.navbar{
height: 12%;
display: flex;
align-items: center;
}

nav{
flex: 1;
text-align: right;
}


nav ul li{
list-style: none;
display: inline-block;
margin-left: 60px;
}

nav ul li a{
text-decoration: none;
color:black;
font-size: 13px;
}

<div class="container">
<div class="navbar">
  <img src="images/logo.png" class="logo">
  <nav>
      <ul>
          <li><a href="{% url 'home' %}">Home</a></li>
          <li><a href="{% url 'login' %}">Login</a></li>
      </ul>
  </nav>
  </div>
</div>

<div class="row">
<div class="col">
  <h1>Sparison</h1>
  <P>Music Matching With Love ❤️ </P>
</div>
</div>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。