中心对齐Span和Section中的内容

Question

我正在使用Bootstrap最新版本并尝试将内容对齐在一个范围和部分中，但似乎没有任何效果。

这是我的标记：

<div class="container body-content">
    <ul id="CategoryMenu" class="list-inline">
        <li>
            <a href="/Category/Cars">
                Cars
            </a>
        </li>

        <li>
            <a href="/Category/Buses">
                Buses
            </a>
        </li>           
    </ul>
    <hr>

    <section>
        <div class="gallery center-block">
            <hgroup>
                <h2>Products</h2>
            </hgroup>


            <div class="categories row">

                <ul id="da-thumbs" class="da-thumbs">
                    <div id="MainContent_productList_ctrl0_itemPlaceholderContainer">                   
                        <li>
                            <a href="/Product/Convertible%20Car">
                                        <img src="/Catalog/Images/Thumbs/carconvert.png">
                                <div><span>Natalie &amp; Justin Cleaning by Justin Younger</span></div>
                            </a>
                            <div>
                                <a href="/Product/Convertible%20Car">
                                            Convertible Car
                                </a>
                            </div>
                        </li>

                        <li>
                            <a href="/Product/Old-time%20Car">
                                        <img src="/Catalog/Images/Thumbs/carearly.png">
                                <div><span>Natalie &amp; Justin Cleaning by Justin Younger</span></div>
                            </a>
                            <div>
                                <a href="/Product/Old-time%20Car">
                                            Old-time Car
                                </a>
                            </div>
                        </li>

                        <li>
                            <a href="/Product/Fast%20Car">
                                        <img src="/Catalog/Images/Thumbs/carfast.png">
                                <div><span>Natalie &amp; Justin Cleaning by Justin Younger</span></div>
                            </a>
                            <div>
                                <a href="/Product/Fast%20Car">
                                            Fast Car
                                </a>
                            </div>
                        </li>

                        <li>
                            <a href="/Product/Super%20Fast%20Car">
                                        <img src="/Catalog/Images/Thumbs/carfaster.png">
                                <div><span>Natalie &amp; Justin Cleaning by Justin Younger</span></div>
                            </a>
                            <div>
                                <a href="/Product/Super%20Fast%20Car">
                                            Super Fast Car
                                </a>
                            </div>
                        </li>

                        <li>
                            <a href="/Product/Old%20Style%20Racer">
                                        <img src="/Catalog/Images/Thumbs/carracer.png">
                                <div><span>Natalie &amp; Justin Cleaning by Justin Younger</span></div>
                            </a>
                            <div>
                                <a href="/Product/Old%20Style%20Racer">
                                            Old Style Racer
                                </a>
                            </div>
                        </li>

                        <li>
                            <a href="/Product/Ace%20Plane">
                                        <img src="/Catalog/Images/Thumbs/planeace.png">
                                <div><span>Natalie &amp; Justin Cleaning by Justin Younger</span></div>
                            </a>
                            <div>
                                <a href="/Product/Ace%20Plane">
                                            Ace Plane
                                </a>
                            </div>
                        </li>

                    </div>
                </ul>

            </div>                 

            <span id="MainContent_it" class="btn-group btn-group-sm text-center">
                <a class="customDisabledClassName btn btn-default">|&lt;</a>
                <a class="customDisabledClassName btn btn-default">&lt;</a>
                <span class="btn btn-primary disabled">1</span>
                <a class="btn btn-default" href="javascript:__doPostBack('ctl00$MainContent$it$ctl01$ctl01','')">2</a>
                <a class="btn btn-default" href="javascript:__doPostBack('ctl00$MainContent$it$ctl01$ctl02','')">3</a>
                <a class="btn btn-default" href="javascript:__doPostBack('ctl00$MainContent$it$ctl02$ctl00','')">&gt;</a>
                <a class="btn btn-default" href="javascript:__doPostBack('ctl00$MainContent$it$ctl02$ctl01','')">&gt;|</a>
            </span>
        </div>
    </section>
</div>

基本上我希望div画廊中的图像应该水平居中。所以我添加了center-block并使用了以下CSS：

.center-block {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

我还想将<span>中的元素居中对齐，称为'MainContent_it'，我也添加了相同的中心块，但似乎没有任何效果。

我还能做什么？

Answer 1

你的代码不是那么清楚，只是猜测

.center-block
{
  width: 600px;
  margin: 0 auto; 
}

如果您想要保证金，请为图像指定宽度：0自动。 您需要定义要居中的元素的宽度，而不是父元素。 将上述类应用于要居中的元素。 请查看链接Why can't I center with margin: 0 auto?

Answer 2

IWantToLearn ，你好。这是你想要对齐的。
请查看 Fiddle 。

.center-this-block {
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;  
}