引导中心复选框答案

【问题标题】：Bootstrap Center Checkboxes引导中心复选框
【发布时间】：2022-06-15 01:57:20
【问题描述】：

如何使检查输入在父列中垂直和水平居中？

下图显示了父列和复选框，我试过text-centered、d-flex justify-content-center、align-self-center，但都没有奏效。我认为这与嵌套列有关？

<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">

<div class="container-lg">
  <div class="row">
    <div class="col-2">
      <div class="row align-items-center h-100">
        <div class="col-4 d-flex border justify-content-center align-items-center h-100">
          <div class="form-check align-items-center d-flex justify-content-center align-items-center">  
            <input class="form-check-input" type="checkbox" value="{{obj.total}}" id="flexCheckDefault" checked> <!-- CENTER THIS ITEM -->
          </div>
        </div>
        <div class="col-4 d-flex justify-content-center h-100 border">
          <div class="form-check d-flex justify-content-center align-items-center">
            <input class="form-check-input" type="checkbox" value="{{obj.total}}" id="flexCheckDefault" checked> <!-- CENTER THIS ITEM -->
          </div>
        </div>
        <div class="col-4 h-100 border d-flex align-items-center justify-content-center">
          <div class="form-check d-flex justify-content-center align-items-center">
            <input class="form-check-input" type="checkbox" value="{{obj.total}}" id="flexCheckDefault" checked> <!-- CENTER THIS ITEM -->
          </div>
        </div>
      </div>
    </div>
    <div class="col-10">
      <div class="row align-items-center h-100">
        <div class="col-2 h-100 border d-flex align-items-center justify-content-center">
          <span>Name</span>
        </div>
        <div class="col-8 h-100 border d-flex align-items-center">
          <span>Desc</span>
        </div>
        <div class="col-1 h-100 border d-flex align-items-center">
          <span>Total</span>
        </div>
        <div class="col-1 wg-right-bottom-border h-100">
          <div class="form-check d-flex justify-content-center">
            <input class="form-check-input align-self-center" type="checkbox" value="{{obj.total}}" id="flexCheckDefault">
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

在打印时也可以垂直和水平居中加分。

【问题讨论】：

请修改您的帖子标题以提出明确、具体的问题。这很荒谬。见How to Ask。
您已标记 Bootstrap 4 但使用的是版本 5 CDN。此外，您的演示似乎没有显示您描述的问题。请修改您的帖子以更正和澄清。

标签： html css twitter-bootstrap checkbox bootstrap-4

【解决方案1】：

现在检查所有复选框都在中心位置。是你想要的吗..？

我只从所有 threr .form-check .div 属性中删除了 align-item-center 并在最后一个复选框中添加了相同的 .align-item-center。

<!DOCTYPE html>
<html lang="en">
<head>
  <title>solution</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css">
  <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.slim.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container-lg">
  <div class="row">
    <div class="col-2">
      <div class="row h-100">
        <div class="col-4 d-flex justify-content-center h-100 border">
          <div class="form-check d-flex justify-content-center">  
            <input class="form-check-input d-flex justify-content-center align-items-center" type="checkbox" value="{{obj.total}}" id="flexCheckDefault" checked> <!-- CENTER THIS ITEM -->
          </div>
        </div>
        <div class="col-4 d-flex justify-content-center h-100 border">
          <div class="form-check d-flex justify-content-center">
            <input class="form-check-input" type="checkbox" value="{{obj.total}}" id="flexCheckDefault" checked> <!-- CENTER THIS ITEM -->
         </div>
        </div>
        <div class="col-4 d-flex justify-content-center h-100 border">
          <div class="form-check d-flex justify-content-center">
            <input class="form-check-input" type="checkbox" value="{{obj.total}}" id="flexCheckDefault" checked> <!-- CENTER THIS ITEM -->
          </div>
        </div>
      </div>
    </div>
    <div class="col-10">
      <div class="row align-items-center h-100">
        <div class="col-2 h-100 border d-flex align-items-center justify-content-center">
          <span>Name</span>
        </div>
        <div class="col-8 h-100 border d-flex align-items-center">
          <span>Desc</span>
        </div>
        <div class="col-1 h-100 border d-flex align-items-center">
          <span>Total</span>
        </div>
        <div class="col-1 d-flex justify-content-center wg-right-bottom-border h-100">
          <div class="form-check d-flex justify-content-center">
            <input class="form-check-input align-self-center" type="checkbox" value="{{obj.total}}" id="flexCheckDefault">
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

</body>
</html>

【讨论】：