Center align contents in Span and Section

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 &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>

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?

Can you replicate in fiddle? – Jared Teng Jul 16 '15 at 03:29 — Jared Teng, Jul 16 '15 at 03:29

score 0 · Answer 1 · edited May 23 '17 at 11:44

0

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?

edited May 23 '17 at 11:44

Community

1
1

answered Jul 16 '15 at 04:11

Amanjot Kaur

2,028
4
18
33

score 0 · Accepted Answer · answered Jul 16 '15 at 04:15

0

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;  
}

enter image description here

answered Jul 16 '15 at 04:15

AngularJR

2,752
2
16
19

Center align contents in Span and Section

2 Answers2