引导中心复选框

发布于 2025-02-06 02:33:33 字数 3077 浏览 4 评论 0原文

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

下图显示了父列和复选框，我尝试了text-centered，d-flex justify-content-center，align-seft-eff-self-center ，没有任何作用。我认为这与嵌套的列有关吗？

<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/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 can I get the check input to be vertically and horizontally centered within the parent column?

Image below shows the parent column and checkbox, I've tried text-centered, d-flex justify-content-center, align-self-center and none have worked. I think it has to do with the nested columns?

<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/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>

Bonus points for it being vertically and horizontally centered while printing as well.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

つ低調成傷 2025-02-13 02:33:33

现在检查所有复选框都处于中心位置。是你想要什么..？

i 仅。 >属性并添加 .d-flex 和 .justify-content-center 在上一个复选框 .col tag中。

<!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/[email protected]/dist/css/bootstrap.min.css">
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/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>

Check now all the checkbox are in center position. Is it what u want..?

I have removed only .align-item-center from all the three .form-check .div attribute and add the .d-flex and .justify-content-center in last checkbox .col tag.

<!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/[email protected]/dist/css/bootstrap.min.css">
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/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>

回复收藏 0 原文

~没有更多了~