时间戳

首页 > 解决方案 > Bootstrap v5.0 上的文本未水平居中对齐

html - Bootstrap v5.0 上的文本未水平居中对齐

问题描述

我正在学习 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>

这是一张图片：

在此处输入图像描述

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

我怎样才能做到这一点？请帮帮我。

谢谢你。

标签： htmlcsstwitter-bootstrapweb-frontendbootstrap-5

解决方案

这是因为<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>

推荐阅读