html5 - How to centralize the left nav -
i having problems trying centralize bootstrap standard nav in row.
<footer id="page_footer"> <div class="container"> <div class="row"> <div class="col-md-8"> <ul id="page_footer_links" class="nav nav-pills nav-center"> <li role="presentation"><a href="#">home</a></li> <li role="presentation"><a href="#">profile</a></li> <li role="presentation"><a href="#">messages</a></li> </ul> </div> <div class="col-md-4"> <p id="page_footer_wordpress" class="text-center">orgulhosamente movido com <a href="http://wordpress.org/" title="a semantic personal publishing platform" rel="generator" target="_blank">wordpress</a>!!!</p> </div> </div> </div>
here complete fiddle: http://jsfiddle.net/vpontin/bkpnrlo0/
i tried putting text-center , center-block. none worked. putting margin 0 auto or text-align: center didn't work.
what need do?
the .nav-pills
list items have default floating behavior left. change none
, display them in 1 line using display: inline-block
.
#page_footer { background-color: #f5f5f5; width: 100%; } #page_footer .container { padding: 20px; } #page_footer_links { margin: 0 auto; text-align: center; } #page_footer_wordpress { margin: 0px; height: 40px; line-height: 40px; } .nav-pills > li { float: none !important; display: inline-block !important; }
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> <footer id="page_footer"> <div class="container"> <div class="row"> <div class="col-md-8"> <ul id="page_footer_links" class="nav nav-pills nav-center"> <li role="presentation"><a href="#">home</a> </li> <li role="presentation"><a href="#">profile</a> </li> <li role="presentation"><a href="#">messages</a> </li> </ul> </div> <div class="col-md-4"> <p id="page_footer_wordpress" class="text-center">orgulhosamente movido com <a href="http://wordpress.org/" title="a semantic personal publishing platform" rel="generator" target="_blank">wordpress</a>!!!</p> </div> </div> </div>
Comments
Post a Comment