Question 44781 in Html Question posted in
Some basic documentation can be found here.

Spacing for nav – Html

Below are my HTML and CSS for my nav on a website. As it stands the words sit at the top of the bar when I want them centered.

How can I do this? And what other things should I do?

nav ul {
     background-color: #6699CC;
     height: 100px;
     margin: 0;
     padding: 0;
     position: -webkit-sticky;
     position: sticky;
     width: 100%;
 }
 nav ul li {
     display: inline;
 }
 nav ul li a {
     color: white;
     font-size: 35px;
     text-decoration: none;
     margin: 80px;
     padding-top: 25px;
 }
 nav ul li a:hover {
     background-color: #003B6D;
 }
<ul>
     <li><a href="index2.html">Home</a> &nbsp; &nbsp;</li>
     <li><a href="hardware.html">Computer Hardware</a> &nbsp; &nbsp;</li>
     <li><a href="software.html">Computer Software</a> &nbsp; &nbsp;</li>               
     <li><a href="internet.html">The Internet</a> &nbsp; &nbsp;</li>
 </ul>
Tags:

2

Answers


  1. 0

    You have to put the parent around the children and make it flex. So in your code, you can put display: flex to the ul.
    Here is the code and some of the codes are comments.

    nav ul {
display: flex;
align-items: center;
justify-content: center;
background-color: #6699cc;
height: 100px;
margin: 0;
padding: 0;
position: -webkit-sticky;
position: sticky;
width: 100%;
}
nav ul li {
display: inline;
margin: 0 10px;
}
nav ul li a {
color: white;
/*      font-size: 35px; */
text-decoration: none;
/*      margin: 80px; */
padding: 25px;
}
nav ul li a:hover {
background-color: #003b6d;
}

    here is its pen.

    Login or Signup to reply.
  2. 0

    This probably gives you what you need.
    display: flex in combination with align-items: center ensure the items are centered vertically inside the nav element.

    /* Style rules for nav */

nav ul {
  background-color: #6699CC;
  height: 100px;
  margin: 0;
  padding: 0;
  position: -webkit-sticky;
  position: sticky;
  width: 100%;
  /* Added */
  display: flex;
  align-items: center;
}

nav ul li a {
  color: white;
  font-size: 35px;
  text-decoration: none;
  margin: 80px;
  padding-top: 25px;
}

nav ul li a:hover {
  background-color: #003B6D;
}
    <nav>
  <ul>
    <li><a href="index2.html">Home</a> &nbsp; &nbsp;</li>
    <li><a href="hardware.html">Computer Hardware</a> &nbsp; &nbsp;</li>
    <li><a href="software.html">Computer Software</a> &nbsp; &nbsp;</li>
    <li><a href="internet.html">The Internet</a> &nbsp; &nbsp;</li>
  </ul>
</nav>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search