Center div content with Bootstrap (center-block)

Question

Can I center the content of div with center-block??

The following example does not work:

<div class="form-group">
    <div class="center-block">
            <input id="user_registrate" type="submit" value="Registrate" class="btn btn-success" />
    </div>
</div>

http://jsfiddle.net/jd93fL1x/2/

And this one works:

<div class="form-group">
    <div>
            <input id="user_registrate" type="submit" value="Registrate" class="btn btn-success center-block" />
    </div>
</div>

http://jsfiddle.net/jd93fL1x/3/

I want two buttons centered, that is why I want the div with the center-block.

Answer 1

The class center-block applies the center to the element itself, not to the content; in this case you can use the class text-center on the container and since the input has the class btn making it inline-block, that will work:

<div class="text-center">
    <input id="user_registrate" type="submit" value="Registrate" class="btn btn-success" />
    <input id="user_registrate" type="submit" value="Registrate" class="btn btn-success" />
</div>

DemoFiddle

Answer 2

Just use text-align:center on the div:

.center-block {
    text-align:center;
}

jsFiddle example

(or use the selector .form-group > div instead of .center-block if you're not using that class for anything)

Answer 3

You can use simply put text-align:center

<div class="form-group">
<div style="text-align:center">
        <input id="user_registrate" type="submit" value="Registrate" class="btn btn-success" />
</div>