Question

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

在上面的代码中，我试图对齐aqua条中间的图标，但它没有按预期工作。任何人都可以帮我修复这个bug吗？ text-align规则位于li a选择器中。

Answer 1

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

Answer 2

你只需要从“缩小菜单”中取出填充，然后像这样在列表项上设置文本对齐...

.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;
        padding: 0;    
    }
li {
    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>

Answer 3

在

li i{
position:relative;
  left:-30px;
}

＆＃13;

.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;
  position:relative;
  left:-30px;
  top:-20px;
}

＆＃13;

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

＆＃13;

Answer 4

我不知道你真正想要的是什么，但我认为通过改变这将解决你的问题

.shrink-icon {
        padding: 12px;
        width: 100%;
        height: 10%;
        margin-left: -13px;
        margin-top: 54%;
    }

文本对齐规则无法按预期工作

4 个答案: