HTML & Bootstrap 5 - 列的中心内容答案

【问题标题】：HTML & Bootstrap 5 - Center content of a columnHTML & Bootstrap 5 - 列的中心内容
【发布时间】：2022-08-12 00:05:39
【问题描述】：

我正在尝试使用 Bootstrap 将列的内容居中。这是我当前的代码：

<!doctype html>
<html lang=\"en\">
  <head>
    <meta charset=\"utf-8\">
    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">
    <title>Bootstrap demo</title>
    <link href=\"https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css\" rel=\"stylesheet\" integrity=\"sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx\" crossorigin=\"anonymous\">
  </head>
  <body>
    
    <!-- CODE -->
    
    <header>
      <div class=\"container-fluid\">
        <div class=\"row\">
           <!-- LEFT -->
           <div class=\"col-md-6 p-md-5 p-4\" style=\"background-color: lime;\">
             <div> <!-- THIS SHOULD BE IN THE CENTER -->
               <h1>Welcome</h1>
               <h2>to my web!</h2>
             </div>
             
             <div> <!-- THIS SHOULD BE IN THE BOTTOM -->
               <p>Icons</p>
             </div>
           </div>
           

           <!-- RIGHT -->
           <div class=\"col-6 d-md-block d-none\" style=\"background-color: red\"></div>
        </div>
      </div>
    </header>
    
    
    <script src=\"https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js\" integrity=\"sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa\" crossorigin=\"anonymous\"></script>
  </body>
</html>

我试过使用d-flex justify-content-center，如下：

<!doctype html>
<html lang=\"en\">
  <head>
    <meta charset=\"utf-8\">
    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">
    <title>Bootstrap demo</title>
    <link href=\"https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css\" rel=\"stylesheet\" integrity=\"sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx\" crossorigin=\"anonymous\">
  </head>
  <body>
    
    <!-- CODE -->
    
    <header>
      <div class=\"container-fluid\">
        <div class=\"row\">
           <!-- LEFT -->
           <div class=\"col-md-6 p-md-5 p-4 d-flex justify-content-center\" style=\"background-color: lime;\">
             <div> <!-- THIS SHOULD BE IN THE CENTER -->
               <h1>Welcome</h1>
               <h2>to my web!</h2>
             </div>
             
             <div> <!-- THIS SHOULD BE IN THE BOTTOM -->
               <p>Icons</p>
             </div>
           </div>
           

           <!-- RIGHT -->
           <div class=\"col-6 d-md-block d-none\" style=\"background-color: red\"></div>
        </div>
      </div>
    </header>
    
    
    <script src=\"https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js\" integrity=\"sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa\" crossorigin=\"anonymous\"></script>
  </body>
</html>

但这不起作用...

如何将元素正确放入列中？

标签： html css twitter-bootstrap

【解决方案1】：

干得好...

这很简单，只需添加类text-center。

请参阅下面的 sn-p。

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

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Bootstrap demo</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
</head>

<body>

  <!-- CODE -->

  <header>
    <div class="container-fluid">
      <div class="row">
        <!-- LEFT -->
        <div class="col-md-6 p-md-5 p-4" style="background-color: lime;">
          <div class="text-center">
            <!-- THIS SHOULD BE IN THE CENTER -->
            <h1>Welcome</h1>
            <h2>to my web!</h2>
          </div>

          <div class="text-center">
            <!-- THIS SHOULD BE IN THE BOTTOM -->
            <p>Icons</p>
          </div>
        </div>


        <!-- RIGHT -->
        <div class="col-6 d-md-block d-none" style="background-color: red"></div>
      </div>
    </div>
  </header>


  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
</body>

</html>

【讨论】：

我的意思是，中心在两个轴上，X 和 Y
你是什么意思？我不明白。