I am struggling to align the nav bar to the centre in pset7 finance. I've done everything else, including all the other formatting to match the staff solution but, this has me stumped! My code is below.

<ul class="nav nav-pills">
    <li><a href="buy.php">Buy</a></li>
    <li><a href="sell.php">Sell</a></li>
    <li><a href="quote.php">Quote</a></li>
    <li><a href="history.php">History</a></li>  
    <li><a href="password.php">Change Password</a></li>   
    <li><a href="logout.php"><strong>Log Out</strong></a></li> 

So far I've tried creating a .center class with margin:auto and text-align: center within the table class in bootstrap.css, before then wrapping the code within this. I have also tried using different css files as there was a suggestion elsewhere that they are corrupted. So far though I have had no luck so any help would be much appreciated. Thanks a lot.

  • What did you try?
    – kzidane
    Feb 6 '15 at 19:26
  • Hi Kareem, sorry for being a bit vague! I have updated my question with what I have tried so far. Thanks for taking the time to input on this. Feb 7 '15 at 16:40

I had the same problem. I then compared http://finance.cs50.net/css/styles.css to my local styles.css and there were a few additional styles including one for the nav bar. I copied the styles.css from the reference solution and now it looks good :)

  • Thanks very much for the help and good spot! All works well after updating the CSS links in the header file. Feb 9 '15 at 12:19
  • You can also just copy the content of styles.css and copy it into your local file and then continue to edit it. This way you get started, but can still be creative.
    – gitterb
    Feb 9 '15 at 14:51

CSS is often so confusing (even for me sometimes :D). You often have to try things out to understand what they actually do.

For example, when you set the margin to auto, typically your un-ordered list is supposed to be centered by the browser. But you don't see that because perhaps it has a 100% width. To fix that, you should assign a smaller value to the width property of the <ul> element.

If you want it to be 100% wide and you want the <li> elements to be centered, I think there are many ways to do that one of which is to set the text-align property of the <ul> element to center.

  • Thanks for your help Kareem. This has enabled me to make some more cool updates to the design! However, updating the CSS links was also necessary where I wished to remain faithful to the staff solution. I am not sure if the differences between staff and student style aheet are intentional or not! Feb 9 '15 at 12:21
  • @coderUK the staff's solution is an example. You're encouraged to be creative!
    – kzidane
    Feb 9 '15 at 13:13

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .