By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
458,068 Members | 1,146 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 458,068 IT Pros & Developers. It's quick & easy.

Day three of practice, I can't get my syntax right to center these links.

P: 1
Expand|Select|Wrap|Line Numbers
  1. <div class="link-box">
  2.     <span class="link">
  3.         <a href="home.html">HOME</a>
  4.     </span>
  5.     <span class="link">
  6.         <a href="contact.html">CONTACT</a>
  7.     </span>
  8.     <span class="link">
  9.         <a href="portfolio.html">PORTFOLIO</a>
  10.     </span>
  11. </div>
  12.  
  13. .link-box > #link {
  14. display: flex;
  15. align-items: center;
  16. justify-content: center
  17. }
  18.  
My edits only return black text.
Oct 29 '19 #1
Share this Question
Share on Google+
2 Replies


gits
Expert Mod 5K+
P: 5,389
you are using the id-selector (#) but you probably want to use the class-selector (.).
Oct 29 '19 #2

P: 53
Hello,Your Code is Right but you use id selector for selecting element in css and in html you use class for defining link.
And you can use below code for centering element inline.

Expand|Select|Wrap|Line Numbers
  1. <div class="link-box">
  2.         <span class="link">
  3.             <a href="home.html">HOME</a>
  4.         </span>
  5.         <span class="link">
  6.             <a href="contact.html">CONTACT</a>
  7.         </span>
  8.         <span class="link">
  9.             <a href="portfolio.html">PORTFOLIO</a>
  10.         </span>
  11.     </div>
  12.  
  13.  
  14. .link-box {
  15. display: flex;
  16. align-items: center;
  17. justify-content: center;
  18. }
  19. .link-box > .link {
  20. padding: 10px;
  21. }
  22.  
Jan 20 '20 #3

Post your reply

Sign in to post your reply or Sign up for a free account.