Center align contents in Span and Section - css

Question

I am using Bootstrap latest version and trying to center align contents in a span and section but nothing seems to work.
Here is my markup:
<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 & 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 & 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 & 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 & 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 & 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 & 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">|<</a>
<a class="customDisabledClassName btn btn-default"><</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','')">></a>
<a class="btn btn-default" href="javascript:__doPostBack('ctl00$MainContent$it$ctl02$ctl01','')">>|</a>
</span>
</div>
</section>
</div>
Basically I want that the images in the div gallery should be centered horizontally. So I added center-block and used the following CSS:
.center-block {
display: block;
margin-left: auto;
margin-right: auto;
}
I also want to center align elements inside the <span> called 'MainContent_it' and I added the same center-block to it too, but nothing seems to work.
What else do I do?

Answer 1

IWantToLearn, Hi there. Is this what you are wanting to align.
Have a look at the Fiddle.
.center-this-block {
position: absolute;
left: 0;
right: 0;
margin: auto;
}

Answer 2

Your code is not so much clear but just on a guess
.center-block
{
width: 600px;
margin: 0 auto;
}
give width to the image if you want margin:0 auto.
You need to define the width of the element you are centering, not the parent element.
Apply the above class to the elements that you want to center.
Have a look at the link Why can't I center with margin: 0 auto?