CODEWITHSUNDEEP
csstwitter-bootstrap
SIFE
SIFE

Reputation: 5695

Center the content of div with bootstrap

I have this footer:

<div id="footer" class="navbar-bottom">
    <div class="navbar-inner">
    <div class="row">
        <div class="span12" style="text-align: center;">
        <ul class="menu-footer">
            <li><a href="#"><img src="images/fportfolio.png"><p class="merg-top">Portfolio</p></a></li>
            <li><a href="#"><img class="center" src="images/fabout.png"><p class="merg-top">About</p></a></li>
            <li><img width="160px" src="images/logo.png"></li>
            <li><a href="#"><img src="images/fclients.png"><p class="merg-top">Clients</p></a></li>
            <li><a href="#"><img src="images/fcontact.png"><p class="merg-top">Contact</p></a></li>
        </ul>
        </div>
    </div>
    </div>
</div>

Each text and image are centered perfectly inside the li element, now I like the ul element reside in center of the div, but its now aligned to left.

Upvotes: 2

Views: 16496

Answers (3)

zoops
zoops

Reputation: 111

Try: 

 <div class="span12 text-center">
    <ul class="menu-footer">
        <li><a href="#"><img src="images/fportfolio.png"><p class="merg-top">Portfolio</p></a></li>
        <li><a href="#"><img class="center" src="images/fabout.png"><p class="merg-top">About</p></a></li>
        <li><img width="160px" src="images/logo.png"></li>
        <li><a href="#"><img src="images/fclients.png"><p class="merg-top">Clients</p></a></li>
        <li><a href="#"><img src="images/fcontact.png"><p class="merg-top">Contact</p></a></li>
    </ul>
  </div>

Upvotes: 1

Hafid Denguir
Hafid Denguir

Reputation: 952

centered an item must crush the float property,

Add this css: 

.span12 {
    width: 940px;
    margin: 0 auto;
    float: none;
}

Upvotes: 2

Maen
Maen

Reputation: 10700

Fix the width of your .menu-footer, and add

margin: 0 auto;

to center it on its parent div.

Upvotes: 5

Related Questions