White Maskers White Maskers - 1 year ago 50
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 Source

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