CSS से नेविगेशन बार में लिंक्स को सेंटर करें

text-align: center का उपयोग

वर्टिकल नेविगेशन बार में लिंक्स को हॉरिजॉन्टली सेंटर करने के लिए <li> एलिमेंट पर text-align: center लागू किया जाता है, क्योंकि लिंक्स (<a>) इंलाइन या इंलाइन-ब्लॉक एलिमेंट्स होते हैं।

उदाहरण

<!DOCTYPE html>
<html>
  <head>
    <style>
      ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
        width: 200px;
      }
      li a {
        display: block;
        background-color: #F0E7E7;
      }
      .active {
        background-color: #4CAF50;
        color: white;
      }
      li {
        text-align: center;
        border-bottom: 1px solid #555;
      }
    </style>
  </head>
  <body>
    <ul>
      <li><a href="#home">Home</a></li>
      <li><a href="#company" class="active">Company</a></li>
      <li><a href="#product">Product</a></li>
      <li><a href="#services">Services</a></li>
      <li><a href="#contact">Contact</a></li>
    </ul>
  </body>
</html>