text-align rule does not work as expected

.shrink-side-bar{
    width: 5%;
    height: 100%;
    background-color: aqua;
}
    
.shrink-icon{
    width:38px;
    height: 50px;
    margin-left: -152%;
    margin-top: 54%;
}
    
li img {
    text-align: center;
}

.shrink-menu{
    list-style: none;    
}

li i {
    text-align: center;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
<body>
    <div id="shrink-side-bar" class="shrink-side-bar">
        <ul class="shrink-menu">
            <li><img class="shrink-icon" src="img/logo%20tkb.png"></li>
            <li><i class="fa fa-sun-o"></i></li>
            <li><i class="fa fa-envelope-o"></i></li>
            <li><i class="fa fa-chevron-right"></i></li>
            <li><i class="fa fa-file-code-o"></i></li>
        </ul>
    </div>
</body>

In the code above I'm trying to align the icons on the middle of the aqua bar, but it is not working as expected. Can any one help me fix this bug? The text-align rule is in li a selector.

Solution

.shrink-side-bar{
      width: 5%;
      height: 100%;
      background-color: aqua;
     
  }
  .shrink-icon{
      width:38px;
      height: 50px;
      
      
  }

  .shrink-menu{
      list-style: none;
      text-align: center;
      /*margin: auto;    */
      padding: 0
  }

  li img{
      text-align: center;
  }

li i{
  text-align: center;
  /*margin: auto;*/
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div id="shrink-side-bar" class="shrink-side-bar">
    <ul class="shrink-menu">
        <li><img class="shrink-icon" src="img/logo%20tkb.png"></li>
        <li><i class=" fa fa-sun-o"></i></li>
        <li><i class=" fa fa-envelope-o"></i></li>
        <li><i class=" fa fa-chevron-right"></i></li>
        <li><i class=" fa fa-file-code-o"></i></li>
    </ul>
</div>