1. link in css not working 2. how to vertically center navbars and add padding on each

Question

I am trying to build my website. 1. I am trying to create link in vertical direction in middle of my page; A,B,C,D however it is not working as a link, it works like a paragraph.

2. I want to make A,B,C,D to have spaces in between them.

3. Is there a way to make A,B,C,D links covered in circle?

/* navigation */
.navig {
    float: left;
    margin-top: 150px;
}
.navig a{
    text-decoration: none;
    color:black;
}
.navig a:hover{
    
}

.navig li{
    list-style-type: none;
    position: fixed;
    padding-top: 50x;
    line-height: 40px;
}

   
  <div class="container">
    <nav class="navig">
      <ul>
        <li><a href="http://google.com">A</a></li>
        <li><a href="http://google.com">B</a></li>
        <li><a href="http://google.com">C</a></li>
        <li><a href="http://google.com">D</a></li>
      </ul>
    </nav>
    
    

Answer 1

I think this is what you are looking for -> (View snippet behind)

• If you want to move A,B,C,D around and create spaces in between them the best option is to use flexbox properties.
• The links A,B,C,D were not displayed properly because you were using position:fixed on the li tags, placing them all in the same tiny space.
• If you want to put the links inside a circle you just have to add a border and border-radius to the A tags.
• [EDIT] display:flex on the anchor tag is setting the A,B,C,D letters perfectly in the center of the circle. I think this method is more reliable than others to achieve it.
• [EDIT] If you would like to move the whole list around instead of having it on the leftside remember you can just apply display: flex to the .navig class and play with the justify-content and align-items properties.

CCS and HTML (HTML remained untouched)

.navig li {
    list-style-type: none;
    margin: 30px 0;
}
.navig a {
    display: flex; 
    justify-content: center; /*flex property to center horizontally*/
    align-items: center; /*flex property to center vertically*/
    width: 50px;
    height: 50px;
    border: 1px solid black;
    border-radius: 50%;
    text-decoration: none;
    color: black;
}
ul, li, a {
    margin: 0;
    padding: 0;
}

<div class="container">
    <nav class="navig">
        <ul>
            <li>
                <a href="http://google.com">
                    A
                </a>
            </li>
            <li>
                <a href="http://google.com">
                    B
                </a>
            </li>
            <li>
                <a href="http://google.com">
                    C
                </a>
            </li>
            <li>
                <a href="http://google.com">
                    D
                </a>
            </li>
        </ul>
    </nav>
</div>

Answer 2

You could do something like this:

.link {
    height: 35px;
    width: 35px;
    background-color: #FFFFFF;
    border-radius: 50%;
    border-style: solid;
    border-width: 1px;
    border-color: black;
    list-style-type: none;
    text-align: center;
    margin: 0 auto;
    margin-bottom: 10px;
    display: flex;           /* establish flex container */
    justify-content: center; /* center items vertically, in this case */
    align-items: center;     /* center items horizontally, in this case */
}

.navig a {
    text-decoration: none;
    color: black;
}

<form>

 <div class="container">
    <nav class="navig">
      <ul>
        <div class=link>
           <li><a href="http://google.com">A</a></li>
        </div>
        <div class=link>
           <li><a href="http://google.com">B</a></li>
        </div>
        <div class=link>
           <li><a href="http://google.com">C</a></li>
        </div>
        <div class=link>
          <li><a href="http://google.com">D</a></li>
        </div>
      </ul>
    </nav>
 </div>
  
</form>

Edit: I do agree with Adrian that using Flexbox is better than just aligning items by using {text-align: center} and {vertical-align: middle}, and I have modified my answer accordingly.