White Maskers White Maskers - 2 months ago 5
CSS Question

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.

Answer

.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>