Perfect center align horizontally with Bootstrap

Question

There are some options I can choose from when it comes to horizontal center alignment with Bootstap.

I can either use offset class or use blank span class as a placeholder. One other option can be using custom alignment like the following

.center {
    float: none;
    margin: 0 auto;
}

None of these options solve my issue because the content of the div container has to fill up the width by 100%.

Let's say I have the following

<div class="container-fluid">
    <div class="row-fluid">
      <div class="span4 offset4">
        <button class="btn">1-1</button>
        <button class="btn">1-2</button>
      </div>
    </div>
</div>

If the buttons do not fill up the whole div space of span4, I won't get the real center alignment. Perhaps, I can make the content stretch to 100% but I don't know if this is any good practice.

Here I have a canvas to play with. JS BIN

Answer 1

Since you have inline elements you can just use the .text-center class on the span, also your're probably better off using offsets than empty elements:

HTML

<div class="row-fluid">
  <div class="span4 offset4 text-center">
    <button class="btn">1-1</button>
    <button class="btn">1-2</button>
  </div>
</div>

Updated demo: http://jsbin.com/ayuFEhO/2/edit

Answer 2

You don't need add a new class, if you want horizontal align this buttons, just use .text-center here is a bin http://jsbin.com/UVeGejO/1/edit

Obs: text-center class already exist on twitter's bootstrap code.