如何将第二列中的文本居中到页面 - 引导
Posted
技术标签:
【中文标题】如何将第二列中的文本居中到页面 - 引导【英文标题】：How to center text in second column to page - bootstrap 【发布时间】：2021-06-15 01:07:20 【问题描述】：我有一个包含两列的标题。第一列是徽标，第二列是居中的标题。下面是带有居中标题的主要内容。我试图让标题中的标题以主父容器为中心，就像主要内容中的标题一样。 我正在使用引导程序 4.6。
这是我正在谈论的内容的示意图：
html, body
height: 100%;
.container-fluid
height: 100%;
min-height: 100%;
.row-color
background-color: #DCE6F2;
.logo-width img
width: 220px;
height: 210px;
.column-width img
width: 120px;
height: 115px;
#page-container
height: 100%;
display: flex;
flex-direction: column;
footer
background-color: #024393;
color: #fff;
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<title>Title</title>
</head>
<body>
<div id="page-container" class="container-fluid">
<div class="row row-color align-items-center text-center p-5">
<div class="col-2 logo-width text-center">
<img src="img/shelter_logo.svg" >
</div>
<div class="col">
<div class="center">
<h2>Heading</h2>
<p>text</p>
<h2>Heading</h2>
<p>Text</p>
</div>
</div>
</div><!-- end row -->
<div class="row my-5">
<div class="col text-center">
<h2>Heading</h2>
</div>
</div>
<div class="row justify-content-around">
<div class="col text-center">
<img src="#" >
<h3>Heading</h3>
</div>
<div class="col text-center">
<img src="#" >
<h3>Heading</h3>
</div>
<div class="col text-center">
<img src="#" >
<h3>Heading</h3>
</div>
<div class="col text-center">
<img src="#" >
<h3>Heading</h3>
</div>
<div class="col text-center">
<img src="#" >
<h3>Heading</h3>
</div>
<div class="col text-center">
<img src="#" >
<h3>Heading</h3>
</div>
<div class="col text-center">
<img src="#" >
<h3>Heading</h3>
</div>
</div>
<footer class="d-flex justify-content-center mt-auto">
<div class="row justify-content-around p-3">
<div class="col text-center">
<h3>Heading</h3>
</div>
<div class="col text-center">
<img src="#" >
</div>
<div class="col text-center">
<h3>Heading</h3>
</div>
<div class="col text-center">
<img src="#" >
</div>
<div class="col text-center">
<h3>Heading</h3>
</div>
<div class="col text-center">
<img src="#g" >
</div>
<div class="col text-center">
<h3>Heading</h3>
</div>
</div>
</footer>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>
</body>
</html>这是一个代码笔：https://codepen.io/west4me/pen/vYywWVX
【问题讨论】：
您应该为该列使用新行，否则您可以尝试 CSS Grid。 如果您将标题中的第二列从col 更改为col-8，则内容将位于页面中心。
【参考方案1】：
.col 将拉伸以填充该行。在您的情况下，您的标题行中有一个.col-2，因此.col 等于.col-10。
如果要居中，则需要位于 12 列引导网格的中间，即每边 2 列。
正如 Rick 所说，您需要将 .col 替换为 .col-8
html, body
height: 100%;
.container-fluid
height: 100%;
min-height: 100%;
.row-color
background-color: #DCE6F2;
.logo-width img
width: 220px;
height: 210px;
.column-width img
width: 120px;
height: 115px;
#page-container
height: 100%;
display: flex;
flex-direction: column;
footer
background-color: #024393;
color: #fff;
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<title>Title</title>
</head>
<body>
<div id="page-container" class="container-fluid">
<div class="row row-color align-items-center text-center p-5">
<div class="col-2 logo-width text-center">
<img src="img/shelter_logo.svg" >
</div>
<div class="col-8">
<div class="center">
<h2>Heading</h2>
<p>text</p>
<h2>Heading</h2>
<p>Text</p>
</div>
</div>
</div><!-- end row -->
<div class="row my-5">
<div class="col text-center">
<h2>Heading</h2>
</div>
</div>
<div class="row justify-content-around">
<div class="col text-center">
<img src="#" >
<h3>Heading</h3>
</div>
<div class="col text-center">
<img src="#" >
<h3>Heading</h3>
</div>
<div class="col text-center">
<img src="#" >
<h3>Heading</h3>
</div>
<div class="col text-center">
<img src="#" >
<h3>Heading</h3>
</div>
<div class="col text-center">
<img src="#" >
<h3>Heading</h3>
</div>
<div class="col text-center">
<img src="#" >
<h3>Heading</h3>
</div>
<div class="col text-center">
<img src="#" >
<h3>Heading</h3>
</div>
</div>
<footer class="d-flex justify-content-center mt-auto">
<div class="row justify-content-around p-3">
<div class="col text-center">
<h3>Heading</h3>
</div>
<div class="col text-center">
<img src="#" >
</div>
<div class="col text-center">
<h3>Heading</h3>
</div>
<div class="col text-center">
<img src="#" >
</div>
<div class="col text-center">
<h3>Heading</h3>
</div>
<div class="col text-center">
<img src="#g" >
</div>
<div class="col text-center">
<h3>Heading</h3>
</div>
</div>
</footer>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>
</body>
</html>【讨论】：
谢谢，只是想不通。感谢您的帮助。以上是关于如何将第二列中的文本居中到页面 - 引导的主要内容，如果未能解决你的问题，请参考以下文章
Sumproduct 与 If(IsNumber(Search
比较两列：如果匹配，则在新列中打印值，如果不匹配，则将第二列的值打印到新列