Question

我有这样的代码 -

＆＃13;

html, body, .container-table {
  height: calc(100% - 50px);
}

/*Making a div in center*/

.container-table {
  display: table;
}
.vertical-center-row {
  display: table-cell;
  vertical-align: middle;
}

＆＃13;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>


<div class="container container-table">
  <!-- Main div to hold all Data -->

  <!-- Login Form -->
  <div class="row vertical-center-row">

    <h2 class="text-center">Login</h2>
    <form class="form-horizontal" action="login.html">
      <div class="form-group">
        <label for="inputEmail" class="control-label col-md-2">Email</label>
        <div class="col-md-4">
          <input name="email" type="email" class="form-control" placeholder="Email" required>
        </div>
      </div>
      <div class="form-group">
        <label for="inputPassword" class="text-center control-label col-md-2">Password</label>
        <div class="col-md-4">
          <input name="password" type="password" class="form-control" placeholder="Password" required>
        </div>
      </div>
      <div class="form-group">
        <div class="col-md-offset-2 col-md-4">
          <div class="checkbox">
            <label>
              <input type="checkbox">Remember me</label>
          </div>
        </div>
      </div>
      <button name="remember_me" type="submit" class="center-block btn btn-primary">Sign in</button>
    </form>
  </div>
</div>

＆＃13;

所以，我得到这样的输出 -

但我希望这样 -

有人可以帮忙吗？

重新 -

这个问题 -

Centering Login Form Bootstrap

不是我的问题的解决方案，因为如果你运行给出的代码并阅读要求，那么你可以很容易地找到它。

更多 - 我的问题不是以div为中心，我的问题是将div放在div内部，div已经水平和垂直居中。

Answer 1

将<?php use yii\helpers\Html; use yii\grid\GridView; use yii\bootstrap\ActiveForm; //use kartik\grid\GridView; use kartik\export\ExportMenu; /* @var $this yii\web\View */ /* @var $searchModel app\models\CattleDataSearch */ /* @var $dataProvider yii\data\ActiveDataProvider */ $this->title = 'Cattle Profile'; $this->params['breadcrumbs'][] = $this->title; $gridColumns = [ ['class' => 'yii\grid\SerialColumn'], 'cattleform_id', 'farmer_id', 'cattle_owner', 'cattle_id', 'type_of_cattle', 'origin', ['class' => 'yii\grid\ActionColumn'], ]; echo ExportMenu::widget([ 'dataProvider' => $dataProvider, 'columns' => $gridColumns, 'columnSelectorOptions'=>[ 'label' => 'Columns', 'class' => 'btn btn-danger' ], 'fontAwesome' => true, 'dropdownOptions' => [ 'label' => 'Export All', 'class' => 'btn btn-success' ] ]); echo GridView::widget([ 'dataProvider' => $dataProvider, 'filterModel' => $searchModel, 'columns' => $gridColumns, ]); ?> <div class="cattle-data-index"> <h1><?= Html::encode($this->title) ?></h1> <?php // echo $this->render('_search', ['model' => $searchModel]); ?> <hr style="background: #C0C0C0; height: 2px;"/> </div> <div class="cattle-form-index" style="border: #FFFFFF solid 1px; border-radius: 10px; padding: 20px; box-shadow: 0px 0px 20px #888888; margin-bottom: 20px; background-color: white; "> <?php $form = ActiveForm::begin([ 'action' => ['index'], 'method' => 'get', ]); ?> <div class="row"> <div class="col-lg-6"> <?= $form->field($model, 'cattleform_id') ?> <?= $form->field($model, 'cattle_id') ?> <?= $form->field($model,'type_of_cattle')- >dropDownList(array('Cow'=>'Cow','Buffalo'=>'Buffalo'), ['prompt'=>'Select....']) ?> </div> <div class="col-lg-6"> <?= $form->field($model,'origin')->dropDownList(array('Gifted'=>'Gifted','Home'=>'Home','Same Village'=>'Same Village','Outside'=>'Outside','Other'=>'Other'),['prompt'=>'Select....']) ?> <?= $form->field($model,'natural_of_ai')->dropDownList(array('Natural'=>'Natural','AI'=>'AI','No Information'=>'No Information','NA'=>'NA','Other'=>'Other'),['prompt'=>'Select....']) ?> <?= $form->field($model,'delivery')->dropDownList(array('Home'=>'Home','Outside'=>'Outside','No Information'=>'No Information','NA'=>'NA'),['prompt'=>'Select....']) ?> <div class="form-group"> <?= Html::submitButton('Search', ['class' => 'btn btn-primary']) ?> <?= Html::resetButton('Reset', ['class' => 'btn btn-default']) ?> <?php if(isset ($_GET['farmer_id'])) { echo Html::a('AddNew', ['create','farmer_id'=>$_GET['farmer_id']], ['class' => 'btn btn-success']); } else { echo Html::a('AddNew', ['create'], ['class' => 'btn btn-success']); } ?> </div> <?php ActiveForm::end(); ?> </div> </div> </div> </div> </div>添加到表单

中行的第一个元素

所有引导表都有12列 - ＆gt;你的表格的宽度是6个单元格 - ＆gt;所以剩下6个细胞 - ＆gt;推动你的3个单元格，每边有3个

col-md-offset-3

html,
body,
.container-table {
  height: calc(100% - 50px);
}
/*Making a div in center*/

.container-table {
  display: table;
}
.vertical-center-row {
  display: table-cell;
  vertical-align: middle;
}

Answer 2

试

.container-table
{
    display: table;
    margin: 0 auto; 
}

Answer 3

请试试这个：

将按钮放在div中：

<div class="row">
<button name="remember_me" type="submit" class="center-block btn btn-primary">Sign in</button>
</div>

并将text-align：center指定给该div。

Answer 4

html,
body,
.container-table {
  height: calc(100% - 50px);
}
body{top:50%;}

/*Making a div in center*/

.container-table {
  display: table;
}
.vertical-center-row {
  display: table-cell;
  vertical-align: middle;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<div class="container container-table">
  <!-- Main div to hold all Data -->

  <!-- Login Form -->
  <div class="row vertical-center-row">

    <div class="col-md-10 col-md-offset-1">
    <h2 class="text-center">Login</h2>
    </div>
    <div class="col-md-10 col-md-offset-1">
      <form action="login.html" class="form-horizontal">
      <div class="form-group">
        <label class="control-label col-md-2" for="inputEmail">Email</label>
        <div class="col-md-8">
          <input type="email" required="" placeholder="Email" class="form-control" name="email">
        </div>
      </div>
      <div class="form-group">
        <label class="text-center control-label col-md-2" for="inputPassword">Password</label>
        <div class="col-md-8">
          <input type="password" required="" placeholder="Password" class="form-control" name="password">
        </div>
      </div>
      <div class="form-group">
        <div class="col-md-offset-2 col-md-8">
          <div class="checkbox">
            <label>
              <input type="checkbox">Remember me</label>
          </div>
        </div>
      </div>
      <div>
      <div class="col-md-10 col-md-offset-1">
        <button class="center-block btn btn-primary" type="submit" name="remember_me">Sign in</button>
    </div>
      
      </div>
    </form>
    </div>
  </div>
</div>

Answer 5

为什么不简单地使用bootstrap列？通过这种方式，登录div中文本和按钮的对齐不会受到影响，并且您不需要任何额外的CSS：

<div class="container row">
    <div class="col-md-4"></div>
    <div class="col-md-4">
       Your login form HTML here ...
    </div>
    <div class="col-md-4"></div>
</div>

将一个Bootstrap 3 div放在一个居中的div中间

重新 -

5 个答案: