Tricks for the Web Tricks for the Web - 5 months ago 36
CSS Question

center text in bootstrap navbar

I've seen several answers of this sort on StackOverflow, but none of them suit my purposes. What I'm trying to do is center text in the navbar. All of the other answers I've seen dealt with centering a nav

. What I want to do is center a
in the navbar. I tried centering the text with
text-align: center
on pretty much every element in the navbar (
) but none of them work.


<div id="navbar" style="opacity: 0;">
<nav class="navbar navbar-default navbar-fixed-top" style="text-align: center;">
<div class="container" style="text-align: center;">
<div class="collapse navbar-collapse" style="text-align: center;">
<ul class="nav navbar-nav">
<li><a href="/">My Website</a></li>
<li><a href="#">About</a></li>
<p class='navbar-text text-center' style='text-align: center;'>My Website</p>
<ul class="nav navbar-nav navbar-right">
<p class="navbar-btn"><a href="checkout.php" class="btn btn-success">Continue to checkout <span class='fa fa-arrow-right'></span></a></p>

How can this work?


I think the best way would be to use position:absolute. Create a special class for this and add the class to your navbar-text.

    position: absolute;
    width: 100%;
    left: 0;
    top: 0;
    text-align: center;