SPACEBETWEEN

Run
<!DOCTYPE html> 
<html> 
<head>
<title>Centered and Space between Pagination Effect</title> 
  <style>
  .center {
    text-align: center;
  } 
    .pagination { 
      display: inline-block; 
      
    } 
    .pagination a { 
      font-size:20px; 
      color: black; 
      float: left; 
      padding: 8px 16px; 
      text-decoration: none; 
      border:1px solid black;
      margin: 0 4px;
     } 
    .pagination a.active { 
      background-color: #1183ed; 
    } 
    .pagination a:hover:not(.active) { 
      background-color:  #7e7f80; 
    } 
  </style> 
</head> 
<body>
<div class="center"> 
  <div class="pagination"> 
    <a href="#">«</a> 
    <a href="#">1</a> 
    <a href="#">2</a> 
    <a href="#">3</a> 
    <a href="#">4</a> 
    <a class="active" href="#">5</a> 
    <a href="#">6</a> 
    <a href="#">7</a> 
    <a href="#">8</a> 
    <a href="#">9</a> 
    <a href="#">10</a> 
    <a href="#">»</a> 
  </div>
</div> 
</body> 
</html>