Question

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

我的代码如下所示：

我应该如何修改它以使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

您是否尝试过添加另一个课程＆＃34; text-center＆＃34;到行div？

Answer 2

只需使用：

margin: 0 auto;

在你想要居中的div上

Answer 3

您可以在想要居中的div上使用text-align: center;

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

#mydiv {
text-align: center;
}

应该做的伎俩。 Simple Demo

Answer 4

如果您使用的是2.3.0版本的Bootstrap，请尝试在CSS中使用span2定义类span 10和text-align: center; - .text-center方法，建议使用直到v2.3才添加@ Wu4D。

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 - 以div为中心的正确方法

5 个答案: