Bootstrap v5.0 上的文本未水平居中
Text is not aligning center horizontally on 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>
这是一张图片：
这里的文字看起来很漂亮，而不是居中。
我该怎么做？请帮助我。
谢谢。
使用名为 text-center:
的实用程序 class
<div class="col-md-8 text-center">
这将使文本在 col-md-8
内居中
他们的文档说使用 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>
在 bootstrap align-items-center 中是一个 flex-box 属性。同样重要的是要注意 align-items-center 影响元素的子元素。
要使其以您希望的方式工作，您需要添加这些 类 d-flex align-self-center
干杯
这是因为 <p> 个标签在 bootstrap 中有 margin-bottom: 1rem;。删除 margin 或删除 <p> 标签。如果你想要一些 space.
然后在行中添加一些填充
<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>
我在您的代码中进行了这些更改..
已添加 class 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>
我正在学习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>
这是一张图片：
这里的文字看起来很漂亮，而不是居中。
我该怎么做？请帮助我。
谢谢。
使用名为 text-center:
<div class="col-md-8 text-center">
这将使文本在 col-md-8
他们的文档说使用 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>
在 bootstrap align-items-center 中是一个 flex-box 属性。同样重要的是要注意 align-items-center 影响元素的子元素。
要使其以您希望的方式工作，您需要添加这些 类 d-flex align-self-center
干杯
这是因为 <p> 个标签在 bootstrap 中有 margin-bottom: 1rem;。删除 margin 或删除 <p> 标签。如果你想要一些 space.
<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>
我在您的代码中进行了这些更改..
已添加 class 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>