html Bootstrap < p>5中的中心

hgqdbh6s  于 11个月前  发布在  Bootstrap
关注(0)|答案(2)|浏览(192)

我有一些问题,以中心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>

字符串

lb3vh1jj

lb3vh1jj1#

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

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

字符串
另外,如果你想垂直居中段落,你可以使用d-flexalign-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>

jhiyze9q

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/

相关问题