Bootstrap v5.0上的文本未水平对齐中心[重复]答案

【问题标题】：Text is not aligning center horizontally on Bootstrap v5.0 [duplicate]Bootstrap v5.0上的文本未水平对齐中心[重复]
【发布时间】：2021-05-09 08:23:11
【问题描述】：

我正在学习 Bootstrap v5.0。我正在尝试制作一个用于练习 Bootstrap 的网页。我有一个问题。文本未水平对齐中心。我使用align-items-center 进行居中，但它不起作用。

我的代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-wEmeIV1mKuiNpC+IOBjI7aAzPcEZeedi5yW5f2yOq55WWLwNGmvvx4Um1vskeMj0" crossorigin="anonymous">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.3/css/all.css" integrity="sha384-SZXxX4whJ79/gErwcOYf+zWLeJdY/qpuqC4cAa9rOGUstPomtqpuNWT9wdPEn2fk" crossorigin="anonymous">
    <link rel="stylesheet" href="./styles.css">
    <title>FairBizz</title>
</head>
<body>
    <!-- ============================== Header 01 ============================== -->
    <div class="container-fluid" style="background: #f7f7fd;">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-md-8">
                    <p>More then 25 years of experience in business! <a href="#" style="color: #08237e; font-weight: 500;">Privacy & Security</a> </p>
                </div>
                <div class="col-md-4 text-end">
                    <i class="fab fa-facebook-f mx-2"></i>
                    <i class="fab fa-twitter mx-2"></i>
                    <i class="fab fa-instagram mx-2"></i>
                    <i class="fab fa-google-plus-g mx-2"></i>
                    <i class="fab fa-behance mx-2"></i>
                </div>
            </div>
        </div>
    </div>

    <!-- ============================== JavaScript ============================== -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-p34f1UUtsS3wqzfto5wAAmdvj+osOnFyQFpp4Ua3gs/ZVWx6oOypYoCJhGGScy+8" crossorigin="anonymous"></script>
</body>
</html>

这是一张图片：

这里的文字看起来很顶而不是中心。

我该怎么做？请帮帮我。

谢谢。

【问题讨论】：

标签： html css twitter-bootstrap web-frontend bootstrap-5

【解决方案1】：

这是因为<p> 标签在引导程序中有margin-bottom: 1rem;。删除 margin 或删除 <p> 标记。如果你想要一些空间，然后在行中添加一些填充。

<div class="row py-4 align-items-center">
    <div class="col-md-8">
        <p class="mb-0">
            More then 25 years of experience in business!
            <a href="#" style="color: #08237e; font-weight: 500"
                >Privacy & Security</a
            >
        </p>
    </div>
    <div class="col-md-4 text-end">
        <i class="fab fa-facebook-f mx-2"></i>
        <i class="fab fa-twitter mx-2"></i>
        <i class="fab fa-instagram mx-2"></i>
        <i class="fab fa-google-plus-g mx-2"></i>
        <i class="fab fa-behance mx-2"></i>
    </div>
</div>

或

<div class="row py-4 align-items-center">
    <div class="col-md-8">
        More then 25 years of experience in business!
        <a href="#" style="color: #08237e; font-weight: 500"
            >Privacy & Security</a
        >
    </div>
    <div class="col-md-4 text-end">
        <i class="fab fa-facebook-f mx-2"></i>
        <i class="fab fa-twitter mx-2"></i>
        <i class="fab fa-instagram mx-2"></i>
        <i class="fab fa-google-plus-g mx-2"></i>
        <i class="fab fa-behance mx-2"></i>
    </div>
</div>

【讨论】：

【解决方案2】：

他们的文档说使用text-center。

编辑：我以为你希望两者都居中。我将这两列都改回col-md-8 和col-md-4，并将text-center 移到第一列。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-wEmeIV1mKuiNpC+IOBjI7aAzPcEZeedi5yW5f2yOq55WWLwNGmvvx4Um1vskeMj0" crossorigin="anonymous">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.3/css/all.css" integrity="sha384-SZXxX4whJ79/gErwcOYf+zWLeJdY/qpuqC4cAa9rOGUstPomtqpuNWT9wdPEn2fk" crossorigin="anonymous">
  <link rel="stylesheet" href="./styles.css">
  <title>FairBizz</title>
</head>

<body>
  <!-- ============================== Header 01 ============================== -->
  <div class="container-fluid" style="background: #f7f7fd;">
    <div class="container">
      <div class="row">
        <div class="col-md-8  text-center">
          <p>More then 25 years of experience in business! <a href="#" style="color: #08237e; font-weight: 500;">Privacy & Security</a> </p>
        </div>
        <div class="col-md-4 text-end">
          <i class="fab fa-facebook-f mx-2"></i>
          <i class="fab fa-twitter mx-2"></i>
          <i class="fab fa-instagram mx-2"></i>
          <i class="fab fa-google-plus-g mx-2"></i>
          <i class="fab fa-behance mx-2"></i>
        </div>
      </div>
    </div>
  </div>

  <!-- ============================== JavaScript ============================== -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-p34f1UUtsS3wqzfto5wAAmdvj+osOnFyQFpp4Ua3gs/ZVWx6oOypYoCJhGGScy+8" crossorigin="anonymous"></script>
</body>

</html>

【讨论】：

【解决方案3】：

我在您的代码中进行了这些更改..

添加类d-flex、text-center。将margin-bottom:0 !important; 添加到<p> 标签中......

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-wEmeIV1mKuiNpC+IOBjI7aAzPcEZeedi5yW5f2yOq55WWLwNGmvvx4Um1vskeMj0" crossorigin="anonymous">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.3/css/all.css" integrity="sha384-SZXxX4whJ79/gErwcOYf+zWLeJdY/qpuqC4cAa9rOGUstPomtqpuNWT9wdPEn2fk" crossorigin="anonymous">
    <link rel="stylesheet" href="./styles.css">
    <title>FairBizz</title>
</head>
<body>
    <!-- ============================== Header 01 ============================== -->
    <div class="container-fluid" style="background: #f7f7fd;">
        <div class="container">
            <div class="row d-flex align-items-center text-center">
                <div class="col-md-8">
                    <p style="margin-bottom:0 !important;">More then 25 years of experience in business! <a href="#" style="color: #08237e; font-weight: 500;">Privacy & Security</a> </p>
                </div>
                <div class="col-md-4 text-end">
                    <i class="fab fa-facebook-f mx-2"></i>
                    <i class="fab fa-twitter mx-2"></i>
                    <i class="fab fa-instagram mx-2"></i>
                    <i class="fab fa-google-plus-g mx-2"></i>
                    <i class="fab fa-behance mx-2"></i>
                </div>
            </div>
        </div>
    </div>

    <!-- ============================== JavaScript ============================== -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-p34f1UUtsS3wqzfto5wAAmdvj+osOnFyQFpp4Ua3gs/ZVWx6oOypYoCJhGGScy+8" crossorigin="anonymous"></script>
</body>
</html>

【讨论】：

【解决方案4】：

使用名为text-center的实用程序类：

<div class="col-md-8 text-center">

这将使文本在col-md-8 中居中

【讨论】：

【解决方案5】：

在引导程序中align-items-center 是一个弹性盒属性。另外需要注意的是，align-items-center 会影响元素的子元素。

要使其以您希望的方式工作，您需要添加这些类d-flex align-self-center

干杯

【讨论】：