Центральное выравнивание содержимого в Span и разделе

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> 

В основном я хочу, чтобы изображения в сНу галерее должно быть по центру по горизонтали. Поэтому я добавил центр-блок и используется следующий CSS:

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

Я также хочу, чтобы центрировать выровнять элементы внутри <span> под названием «MainContent_it» и я тоже добавил ту же центральную блок к нему, но ничего не похоже на работу ,

Что мне делать?

Answer 1

IWantToLearn, Привет там. Это то, что вы хотите выровнять.
Посмотрите на Fiddle.

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

Answer 2

Ваш код не так ясно, но только на догадку

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

ширины дают к изображению, если вы хотите поле: 0 авто. Вам нужно определить ширину элемента, который вы центрируете, а не родительский элемент. Примените вышеуказанный класс к элементам, которые вы хотите центрировать. Посмотрите ссылку Why can't I center with margin: 0 auto?