Question

我正在尝试将<section>标记内的所有内容集中在container类中。我尝试使用这个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>

这是我的小提琴

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

Answer 1

您可以设置容器div的宽度吗？

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

将所有内容集中在<section>标记</section>中

1 个答案: