css - 将所有内容集中在 标签中

Question

我正在尝试将所有内容都集中在 <section> 中container 内的标签类(class)。我试过使用这个 css，但它仍然不会居中，它仍然向左对齐。知道我错过了什么吗？我也尝试添加 !important，以防万一，但得到了相同的结果。

.row-fluid [class*="span"].centered, .centered {
    margin-left: auto;
    margin-right: auto;
    float: none;
}

这是我的HTML

  <section id="how">
        <div class="container">
            <div class="row-fluid">
                <div class="span12 centered">
                    <h2>How It Works</h2>
                </div>
            </div>
            <div class="row-fluid">
                <div class="span2 how-it-works">
                    <h6>1. Schedule your pick-up</h6>
                    <div class="img_box">
                        <img src="images/dirty_square.jpg" />
                    </div>
                    <div>
                        bla bla bla bla bla
                    </div>
                </div>
                <div class="span2 how-it-works">
                    <h6>Step 2: Hand off</h6>
                    <div class="img_box">
                        <img src="images/bag_square.jpg" />
                    </div>
                    <div>
                        bla bla bla bla bla
                    </div>
                </div>
                <div class="span2 how-it-works">
                    <h6>Step 3: Enjoy</h6>
                    <div class="img_box">
                        <img src="images/folded_square.jpg" />
                    </div>
                    <div>
                        bla bla bla bla bla
                    </div>
                </div>
            </div>

            <div class="btn-container">
                <a href="/orders.html" class="btn btn-large btn-info">
                click here
              </a>
            </div>

        </div>
    </section>

这是我的 fiddle

http://jsfiddle.net/WesWz/11/

Answer 1

你能为容器 div 设置宽度吗？

div.container{
    width:600px;
    margin: 0 auto;
}