Question

我已尝试this和this个答案。但我没有成功：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title></title>
</head>
<body>

  <form method="POST" action="result.html" class="da-form">
    <input type="text" name="textbox" class="textbox">
    <input type="submit" class="submit">
  </form>

  <script>

    var formEl = document.querySelector('.da-form');
    var submitBtn = document.querySelector('.da-form .submit');
    var textEl = document.querySelector('.textbox');

    submitBtn.addEventListener('click', function(event) {
      event.preventDefault();
      if (textEl.value.length >= 5) {
        formEl.submit();
      } else {
        console.error('text should be at least 5 chars long');
      }
      console.log();
    });

  </script>

</body>
</html>

我希望<div class="container"> <div class="btn-group-vertical"> <div class="row row-eq-height" style="overflow: hidden"> <div class="col-sm-6" style="display: inline-block; vertical-align: middle; margin-bottom: -99999px; padding-bottom: 99999px;"> <button class="btn btn-default">hello</button> </div> <div class="col-sm-6" style="display: inline-block; vertical-align: middle; margin-bottom: -99999px; padding-bottom: 99999px;"> <span class="label label-success" style="font-size: small; vertical-align: iddle;">World</span> </div> </div> </div> </div>由World元素集中。我怎么能实现呢？

Answer 1

这是bootply：

 .row-eq-height{
  display: flex;
  align-items: center;
  justify-content: center;
}

Answer 2

检查this link并搜索偏移类。每行有12列。如果您给出div类col-sm-6，div占12列中的6列，则剩下6列（空）列。要将此div居中，您将其除以余数除以2：3（6/2 = 3）。因此，如果您将col-sm-offset-3添加到所述div，它就会位于中心。

这是如何适用于您的问题： 将两个按钮放在一个div中，并使用上述方法将其居中。

修改

你问过如何将行元素居中，你不应该这样做。在.row元素内添加.container元素，并在.container内添加您的列：col-device-size。

Bootstrap：集中行元素

2 个答案: