在页面中居中我的引导表单

Posted

技术标签:

【中文标题】在页面中居中我的引导表单【英文标题】：Center My bootstrap form in the page 【发布时间】：2016-12-11 01:58:28 【问题描述】：

我有以下代码，它不会粘在页面中间。我已经尝试了许多 CSS 技巧以使其位于页面的中心，但我做不到。有什么建议吗？我应该在 CSS 中添加什么使其出现在 m 页面的中间？

<head>
  <meta name="generator" content="html Tidy for HTML5 (experimental) for Windows https://github.com/w3c/tidy-html5/tree/c63cc39" />
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
  <link rel="stylesheet" href="buynow.css" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
  <meta charset="UTF-8" />
  <title>CrowdLinker</title>
</head>

<div class="container">
  <div class='row  '>
    <div class="col-md-6 offset-md-3 ">

      <form accept-charset="UTF-8" action="/" class="require-validation" data-cc-on-file="false" data-stripe-publishable-key="pk_bQQaTxnaZlzv4FnnuZ28LFHccVSaj" id="payment-form" method="post">
        <div style="margin:0;padding:0;display:inline">
          <input name="utf8" type="hidden" value="✓" />
          <input name="_method" type="hidden" value="PUT" />
          <input name="authenticity_token" type="hidden" value="qLZ9cScer7ZxqulsUWazw4x3cSEzv899SP/7ThPCOV8=" />
        </div>
        <div class='form-row'>
          <div class='col-xs-12 form-group required'>
            <label class='control-label'>Name on Card</label>
            <input class='form-control' size='4' type='text'>
          </div>
        </div>
        <div class='form-row'>
          <div class='col-xs-12 form-group card required'>
            <label class='control-label'>Card Number</label>
            <input autocomplete='off' class='form-control card-number' size='20' type='text'>
          </div>
        </div>
        <div class='form-row'>
          <div class='col-xs-4 form-group cvc required'>
            <label class='control-label'>CVC</label>
            <input autocomplete='off' class='form-control card-cvc' placeholder='ex. 311' size='4' type='text'>
          </div>
          <div class='col-xs-4 form-group expiration required'>
            <label class='control-label'>Expiration</label>
            <input class='form-control card-expiry-month' placeholder='MM' size='2' type='text'>
          </div>
          <div class='col-xs-4 form-group expiration required'>
            <label class='control-label'> </label>
            <input class='form-control card-expiry-year' placeholder='YYYY' size='4' type='text'>
          </div>
        </div>
        <div class='form-row'>
          <div class='col-md-12'>
            <div class='form-control total btn btn-info'>
              Total:
              <span class='amount'>$300</span>
            </div>
          </div>
        </div>
        <div class='form-row'>
          <div class='col-md-12 form-group'>
            <button class='form-control btn btn-primary submit-button' type='submit'>Pay »</button>
          </div>
        </div>
        <div class='form-row'>
          <div class='col-md-12 error form-group hide'>
            <div class='alert-danger alert'>
              Please correct the errors and try again.
            </div>
          </div>
        </div>
      </form>
    </div>
    <div class='col-md-4'></div>
  </div>
</div>

【问题讨论】：

您希望该 html 的哪一部分居中？你的 CSS 在哪里？ @Amir Torkashvand：我提供了两种解决方案。使用任何你喜欢的东西。 【参考方案1】：

您可以使用 CSS 规则来做到这一点，但这里是作为内联样式：

改变

<div class="container">

到

<div class="container" style="text-align:center">

结果：

<head>
  <meta name="generator" content="HTML Tidy for HTML5 (experimental) for Windows https://github.com/w3c/tidy-html5/tree/c63cc39" />
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
  <link rel="stylesheet" href="buynow.css" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
  <meta charset="UTF-8" />
  <title>CrowdLinker</title>
</head>

<div class="container" style="text-align:center">
  <div class='row  '>
    <div class="col-md-6 offset-md-3 ">

      <form accept-charset="UTF-8" action="/" class="require-validation" data-cc-on-file="false" data-stripe-publishable-key="pk_bQQaTxnaZlzv4FnnuZ28LFHccVSaj" id="payment-form" method="post">
        <div style="margin:0;padding:0;display:inline">
          <input name="utf8" type="hidden" value="✓" />
          <input name="_method" type="hidden" value="PUT" />
          <input name="authenticity_token" type="hidden" value="qLZ9cScer7ZxqulsUWazw4x3cSEzv899SP/7ThPCOV8=" />
        </div>
        <div class='form-row'>
          <div class='col-xs-12 form-group required'>
            <label class='control-label'>Name on Card</label>
            <input class='form-control' size='4' type='text'>
          </div>
        </div>
        <div class='form-row'>
          <div class='col-xs-12 form-group card required'>
            <label class='control-label'>Card Number</label>
            <input autocomplete='off' class='form-control card-number' size='20' type='text'>
          </div>
        </div>
        <div class='form-row'>
          <div class='col-xs-4 form-group cvc required'>
            <label class='control-label'>CVC</label>
            <input autocomplete='off' class='form-control card-cvc' placeholder='ex. 311' size='4' type='text'>
          </div>
          <div class='col-xs-4 form-group expiration required'>
            <label class='control-label'>Expiration</label>
            <input class='form-control card-expiry-month' placeholder='MM' size='2' type='text'>
          </div>
          <div class='col-xs-4 form-group expiration required'>
            <label class='control-label'> </label>
            <input class='form-control card-expiry-year' placeholder='YYYY' size='4' type='text'>
          </div>
        </div>
        <div class='form-row'>
          <div class='col-md-12'>
            <div class='form-control total btn btn-info'>
              Total:
              <span class='amount'>$300</span>
            </div>
          </div>
        </div>
        <div class='form-row'>
          <div class='col-md-12 form-group'>
            <button class='form-control btn btn-primary submit-button' type='submit'>Pay »</button>
          </div>
        </div>
        <div class='form-row'>
          <div class='col-md-12 error form-group hide'>
            <div class='alert-danger alert'>
              Please correct the errors and try again.
            </div>
          </div>
        </div>
      </form>
    </div>
    <div class='col-md-4'></div>
  </div>
</div>

【讨论】：

我希望整个表单位于页面的中心 style="text-align:center" 仅用于字体而不是整个表单 添加了一张图片到我的anwser，我不明白你的意思，所有的内容都是居中的。请解释您认为不正确的地方【参考方案2】：

引导修复： 将form 标记上方的col-md-6 offset-md-3 替换为col-xs-6 col-xs-offset-3 col-sm-6 col-sm-offset-3 col-md-6 col-md-offset-3 col-lg-5 col-lg-offset-3

普通模式：

添加float: none !important; margin: 0 auto;

<head>
  <meta name="generator" content="HTML Tidy for HTML5 (experimental) for Windows https://github.com/w3c/tidy-html5/tree/c63cc39" />
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
  <link rel="stylesheet" href="buynow.css" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
  <meta charset="UTF-8" />
  <title>CrowdLinker</title>
</head>

<div class="container" style="text-align:center">
  <div class='row  '>
    <div class="col-md-6 offset-md-3 " style="float: none !important; margin: 0 auto;">

      <form accept-charset="UTF-8" action="/" class="require-validation" data-cc-on-file="false" data-stripe-publishable-key="pk_bQQaTxnaZlzv4FnnuZ28LFHccVSaj" id="payment-form" method="post">
        <div style="margin:0;padding:0;display:inline">
          <input name="utf8" type="hidden" value="✓" />
          <input name="_method" type="hidden" value="PUT" />
          <input name="authenticity_token" type="hidden" value="qLZ9cScer7ZxqulsUWazw4x3cSEzv899SP/7ThPCOV8=" />
        </div>
        <div class='form-row'>
          <div class='col-xs-12 form-group required'>
            <label class='control-label'>Name on Card</label>
            <input class='form-control' size='4' type='text'>
          </div>
        </div>
        <div class='form-row'>
          <div class='col-xs-12 form-group card required'>
            <label class='control-label'>Card Number</label>
            <input autocomplete='off' class='form-control card-number' size='20' type='text'>
          </div>
        </div>
        <div class='form-row'>
          <div class='col-xs-4 form-group cvc required'>
            <label class='control-label'>CVC</label>
            <input autocomplete='off' class='form-control card-cvc' placeholder='ex. 311' size='4' type='text'>
          </div>
          <div class='col-xs-4 form-group expiration required'>
            <label class='control-label'>Expiration</label>
            <input class='form-control card-expiry-month' placeholder='MM' size='2' type='text'>
          </div>
          <div class='col-xs-4 form-group expiration required'>
            <label class='control-label'> </label>
            <input class='form-control card-expiry-year' placeholder='YYYY' size='4' type='text'>
          </div>
        </div>
        <div class='form-row'>
          <div class='col-md-12'>
            <div class='form-control total btn btn-info'>
              Total:
              <span class='amount'>$300</span>
            </div>
          </div>
        </div>
        <div class='form-row'>
          <div class='col-md-12 form-group'>
            <button class='form-control btn btn-primary submit-button' type='submit'>Pay »</button>
          </div>
        </div>
        <div class='form-row'>
          <div class='col-md-12 error form-group hide'>
            <div class='alert-danger alert'>
              Please correct the errors and try again.
            </div>
          </div>
        </div>
      </form>
    </div>
    <div class='col-md-4'></div>
  </div>
</div>

【讨论】：

以上是关于在页面中居中我的引导表单的主要内容，如果未能解决你的问题，请参考以下文章

在引导程序中居中表单不起作用[重复]

如何在引导程序 3 中居中表格

在 100% 高度的 div 中居中 div（垂直和水平）（引导程序）

在引导程序 5 中居中图像

在 div 中居中 toastr 通知

如何在我的 TD 中居中我的背景图像？