Home > Article > Web Front-end > How to Center Navbar Links in Twitter Bootstrap?
The Twitter Bootstrap navbar is a versatile component that can be customized to suit different layouts. This article demonstrates how to center the links within the navbar, addressing a common user request.
Originally, the links in the navbar were left-aligned, despite the desired outcome of central alignment. Attempts to use pre-existing CSS rules did not yield the desired result.
To center the navbar links, we need to set the display property of the links to inline-block and the text-align property of the navbar's container to center. Here's the modified CSS:
<code class="css">.navbar .nav, .navbar .nav > li { float: none; display: inline-block; *display: inline; /* ie7 fix */ *zoom: 1; /* hasLayout ie7 trigger */ vertical-align: top; } .navbar-inner { text-align: center; }</code>
To avoid unwanted modifications to other nav sections, it's advisable to create a custom class targeting the desired navbar menu. For example, we can create a class called "center":
<code class="html"><div class="navbar navbar-fixed-top center"> <div class="navbar-inner"> .... </div> </div></code>
Then, we can target this class in our CSS:
<code class="css">.center.navbar .nav, .center.navbar .nav > li { float: none; display: inline-block; *display: inline; /* ie7 fix */ *zoom: 1; /* hasLayout ie7 trigger */ vertical-align: top; } .center .navbar-inner { text-align: center; }</code>
After centering the main links, it may be necessary to realign the submenu items to the left if they have been affected by the changes. This can be achieved with additional CSS:
<code class="css">.center .dropdown-menu { text-align: left; }</code>
A live demonstration of this solution can be found here: http://jsfiddle.net/C7LWm/7/.
The above is the detailed content of How to Center Navbar Links in Twitter Bootstrap?. For more information, please follow other related articles on the PHP Chinese website!