How to vertically center the link button?-CodePudding

can someone help, how to vertically center the link button in to the div. The link button height and Menu bar height must the same. If I add text-align :center css style also the contents are not aligned

https://plnkr.co/edit/iV0swyC2VTmAuDTL?open=lib/script.js

<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">


</head>

<body>

  <!-- Top navigation -->
  <div >

    <!-- Centered link -->
    <div >
      <a href="#home" >Home</a>
    </div>

    <!-- Left-aligned links (default) -->
    <a href="#news">News</a>
    <a href="#contact">Contact</a>

    <!-- Right-aligned links -->
    <div >
      <a href="#search">Search</a>
      <a href="#about">About</a>
    </div>

  </div>

  <div style="padding-left:16px">
    <h2>Responsive Top Navigation with Centered and Right-Aligned Links</h2>
    <p>Resize the browser window to see the responsive effect.</p>
  </div>

</body>

</html>

[1]: https://plnkr.co/edit/iV0swyC2VTmAuDTL?open=lib/script.js

CodePudding user response：

Set line-height equal to height of your element. Because of the padding overflowing you need to set different for active and "passive" elements.

.topnav a.active {
  background-color: #04AA6D;
  color: white;
  line-height: 100px
 }

.topnav a {
 float: left;
 color: #f2f2f2;
 text-align: center;
 padding: 14px 16px;
 text-decoration: none;
 font-size: 17px;
 background-color:lightgray;
 height:100px;
 line-height: 80px
}