.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>在上面的代码中，我试图对齐水色条中间的图标，但它没有按预期工作。任何人都可以帮我修复这个错误吗？ text-align 规则在 li a 选择器中。
最佳答案
.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>关于html - 文本对齐规则未按预期工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39630286/