Bootstrap 2 - 居中 a div 的正确方法

Question

我正在使用 Bootstrap 和 Yii 框架 - 并试图将我的登录框置于页面中间，但没有任何乐趣。

我的代码如下所示：

我应该如何修改它才能使 div 显示在中央？

一个 jsfiddle -: http://jsfiddle.net/7946rak9/1/

        <div class="row">
        <?php $form = $this->beginWidget('CActiveForm', array(
            'id' => get_class($model),
            'enableAjaxValidation'      => true,
            'clientOptions' => array(
                'validateOnSubmit' => true,
                'validateOnChange' => false,
            ),
            'htmlOptions' => array('class'=>'form-vertical'),
            'action'                    => array('/frontend/user/login')
        )); ?>

        <div class="span2">
            <?php echo $form->labelEx($model,'username'); ?>
        </div>
        <div class="span10">
            <?php echo $form->textField($model,'username', array('class' => '')); ?>
            <?php echo $form->error($model, 'username', array('class'=>'errorMessage')); ?>
        </div>
    </div>

    <div class="row">
        <div class="span2">
            <?php echo $form->labelEx($model,'password'); ?>
        </div>
        <div class="span10">
            <?php echo $form->passwordField($model,'password', array('class' => '')); ?>
            <?php echo $form->error($model, 'password', array('class'=>'errorMessage')); ?>
        </div>
    </div>

    <div class="row">
        <div class="offset2 span10">
            <?php echo $form->checkBox($model,'rememberMe', array('class' => 'pull-left')); ?>
            <?php echo $form->labelEx($model,'rememberMe', array('style' => 'padding-left: 20px;')); ?>
            <?php echo $form->error($model, 'rememberMe', array('class'=>'errorMessage')); ?>
        </div>
    </div>

    <div class="row">
        <div class="offset2 span3">
            <?php echo Html::submitButton('Login', array('class' => 'btn')); ?>
        </div>
    </div>
    <?php $this->endWidget();?>

Answer 1

你试过在行 div 中添加另一个 class "text-center" 吗？

Answer 2

只需使用：

margin: 0 auto;

在div你想居中

Answer 3

您只需在要居中的div上使用text-align: center;

<div id="mydiv"></div>

#mydiv {
text-align: center;
}

应该可以解决问题。 Simple Demo

Answer 4

如果您使用的 Bootstrap - @Wu4D 建议的 .text-center 方法直到 v2.3 才被添加。

Answer 5

已编辑：

如果您想使用 Bootstrap 2 的包含标记，请使用以下内容将您的 div 偏移到行的中间。

<div class="row-fluid">
  <div class="span4">...</div>
  <div class="span4 offset3">...</div>
</div>

http://getbootstrap.com/2.3.2/scaffolding.html#fluidGridSystem

备选

或者您可以用另一个 div 包装所有 div，然后使用以下标记。

<div class="wrapper">
....all you content divs here
</div>


.wrapper {
  margin: 0 auto;
  width: 50%;
}

http://jsfiddle.net/7946rak9/2/

Bootstrap 2 - 居中 a div 的正确方法

Bootstrap 2 - correct way to centre a div

html

css

yii

twitter-bootstrap