如何将第二列中的文本居中到页面 - bootstrap

Question

我有一个包含两列的 header。第一列是徽标，第二列是居中标题。下面是带有居中标题的主要内容。我正在尝试获取它，以便 header 中的标题以主 parent 容器为中心，就像主要内容中的标题一样。我正在使用 bootstrap 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" alt="Logo Here">                    
                </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="#" alt="">
                    <h3>Heading</h3>
                </div>
                <div class="col text-center">
                    <img src="#" alt="">
                    <h3>Heading</h3>
                </div>
                <div class="col text-center">
                    <img src="#" alt="">
                    <h3>Heading</h3>
                </div>
                <div class="col text-center">
                    <img src="#" alt="">
                    <h3>Heading</h3>
                </div>
                <div class="col text-center">
                    <img src="#" alt="">
                    <h3>Heading</h3>
                </div>
                <div class="col text-center">
                    <img src="#" alt="">
                    <h3>Heading</h3>
                </div>
                <div class="col text-center">
                    <img src="#" alt="">
                    <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="#" alt="">                        
                    </div>
                    <div class="col text-center">
                        <h3>Heading</h3>
                    </div>
                    <div class="col text-center">
                        <img src="#" alt="">
                    </div>
                    <div class="col text-center">
                        <h3>Heading</h3>
                    </div>
                    <div class="col text-center">
                        <img src="#g" alt="">
                    </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

Answer 1

.col 将拉伸以填充该行。在您的情况下，您的标题行中有一个 .col-2，因此 .col 等于 .col-10。

如果你想让它居中，你需要在 12 列 bootstrap 网格的中间，这意味着每边 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" alt="Logo Here">                    
                </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="#" alt="">
                    <h3>Heading</h3>
                </div>
                <div class="col text-center">
                    <img src="#" alt="">
                    <h3>Heading</h3>
                </div>
                <div class="col text-center">
                    <img src="#" alt="">
                    <h3>Heading</h3>
                </div>
                <div class="col text-center">
                    <img src="#" alt="">
                    <h3>Heading</h3>
                </div>
                <div class="col text-center">
                    <img src="#" alt="">
                    <h3>Heading</h3>
                </div>
                <div class="col text-center">
                    <img src="#" alt="">
                    <h3>Heading</h3>
                </div>
                <div class="col text-center">
                    <img src="#" alt="">
                    <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="#" alt="">                        
                    </div>
                    <div class="col text-center">
                        <h3>Heading</h3>
                    </div>
                    <div class="col text-center">
                        <img src="#" alt="">
                    </div>
                    <div class="col text-center">
                        <h3>Heading</h3>
                    </div>
                    <div class="col text-center">
                        <img src="#g" alt="">
                    </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>

如何将第二列中的文本居中到页面 - bootstrap

How to center text in second column to page - bootstrap

css

alignment

twitter-bootstrap

bootstrap-4