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

我已经在页面顶部创建了一个

navbar

，我想将一些段落放在它的正下方。段落居中，但在页面下方。如何将它们恢复到不向下滚动的可见视图。本质上，

行

和

列

div

<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>

---

只需使用

文本对齐：居中。除非您想使用flexbox还有其他原因


.col{
文本对齐：居中；
}





斯派里森
 与爱相配的音乐❤️ 
如果使用引导将praghraph向右对齐，则可以将内容结尾添加到行中

      <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 justify-content-end">
       <div class="col">
      <h1>Sparison</h1>
   <P>Music Matching With Love ❤️ </P>
       </div>
      </div>

您有
高度：100vh.container
上的code>，这就是内容被强制关闭的原因。使用
高度：20vh，如下所示：


.col{
显示器：flex；
弯曲方向：立柱；
证明内容：中心；
对齐项目：居中；
文本对齐：居中；
最小高度：0vh；
}
*{
保证金：0；
填充：0；
字体系列：“Roboto”，无衬线；
}
.集装箱{
宽度：100%；
高度：20vh；
背景位置：中心；
背景尺寸：封面；
左：8%；
右：8%；
框大小：边框框；
}
navbar先生{
身高：12%；
显示器：flex；
对齐项目：居中；
}
导航{
弹性：1；
文本对齐：右对齐；
}
李国荣{
列表样式：无；
显示：内联块；
左边距：60像素；
}
海军ulli a{
文字装饰：无；
颜色：黑色；
字体大小：13px；
}





斯派里森
 与爱相配的音乐❤️ 
我刚才就是这么做的。我希望文本在
导航栏的正下方
谢谢你的评论，但这会将文本放在我屏幕的左下角，不幸的是，你的容器也会滚动，因为你的添加到你的容器高度：100vh；如果删除高度：100vh您的容器不滚动NP，如果您遇到熟悉的问题，请尝试在浏览器检查器上打开页面，从顶部开始，向下移动。
容器
太大了，它把所有东西都压下来了。在检查员的帮助下，很容易发现这样的东西
      <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 justify-content-end">
       <div class="col">
      <h1>Sparison</h1>
   <P>Music Matching With Love ❤️ </P>
       </div>
      </div>

.row{
   display:flex;
justify-content:flex-end;
   width:100%;
     }