Search code examples
htmlcsstwitter-bootstrapcss-floatcenter

How to center DIVs with float: left; in Bootstrap 3?

I am fighting with this stuff some time already and cannot figure it out:

<div class="container">
  <div>
    <div style="float: left;">xxx</div>
    <div style="float: left;">xxx</div>
    <div style="float: left;">xxx</div>
  </div>
</div>

I cannot center those 3 float: left; DIVs... (I don't want to use hard width for them).

Thank you for any advice.

Solution

  • Try the following:

    <div class="container">
  <div class="row">
    <div class="span4 offset4" style="float: left; text-align: center">xxx</div>
    <div class="span4 offset4" style="float: left; text-align: center">xxx</div>
    <div class="span4 offset4" style="float: left; text-align: center">xxx</div>
  </div>
</div>

    Another possible solution would be creating custom class:

    CSS:

    .centered {
     float: none;
     margin-left: auto;
     margin-right: auto;
}

    HTML:

    <div class="span4 offset4 centered"> xxx </div>