html Bootstrap < p>5中的中心

hgqdbh6s 于 4个月前发布在 Bootstrap

关注(0)|答案(2)|浏览(71)

我有一些问题，以中心p在一个div。我需要一些帮助！
非常感谢您！
下面是我的代码：

<div class="navbar d-flex flex-grow-1 justify-content-end align-items-end mb-3 d-none d-sm-flex">
  <div class="d-flex align-items-center justify-content-center text-white me-2 fw-bold">
    <p>THIS NEEDS TO BE CENTERED</p>
  </div>
  <a type="button" class="btn btn-gold" href="">Booking!</a>
</div>

字符串

Html

来源：https://stackoverflow.com/questions/77712099/center-p-in-bootstrap-5

2条答案

按热度按时间

lb3vh1jj1#

您可以在bootstrap中使用多种方法将p标记居中。
这就是如何根据Documentation将其与text-center居中

<p class="text-center">Center aligned text on all viewport sizes.</p>

字符串
另外，如果你想垂直居中段落，你可以使用d-flex和align-items-center类。下面是一个例子：

<div class="container d-flex align-items-center" style="height: 100vh;">
  <p class="text-center mx-auto">This paragraph will be centered vertically.</p>
</div>

型

赞(0）回复(0）举报 4个月前

jhiyze9q2#

你可以使用text-center类作为它的父div。如果你只需要把<p>放在中间，把text-center类放在里面。

<div class="navbar d-flex flex-grow-1 justify-content-end align-items-end mb-3 d-none d-sm-flex">
  <div class="d-flex align-items-center justify-content-center text-white me-2 fw-bold text-center">
    <p>THIS NEEDS TO BE CENTERED</p>
  </div>
  <a type="button" class="btn btn-gold" href="">Booking!</a>
</div>

字符串
阅读更多：https://getbootstrap.com/docs/5.0/utilities/text/

赞(0）回复(0）举报 4个月前