Căn giữa liên kết trong thanh điều hướng với CSS

Căn giữa mục menu trong navbar dọc

Để căn giữa văn bản liên kết trong thanh điều hướng dọc, áp dụng text-align: center cho phần tử <li>.

Ví dụ minh họ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">Trang chủ</a></li>
    <li><a href="#company" class="active">Công ty</a></li>
    <li><a href="#product">Sản phẩm</a></li>
    <li><a href="#services">Dịch vụ</a></li>
    <li><a href="#contact">Liên hệ</a></li>
  </ul>
</body>
</html>

Mỗi mục menu (li a) hiển thị khối (block) chiếm toàn bộ chiều rộng, văn bản được căn giữa nhờ text-align: center trên li.