Question

我试图将垂直对齐的菜单项（图和文本）居中放置。

以下是屏幕截图，显示了atm。菜单项应该居中。 https://i.gyazo.com/aaabc2d1f1ee8f75e12e044e8b0560a5.png

首先将图像和捕获的图像垂直对齐

display:table-cell;
vertical-align: middle;

我也尝试过：

display: flex;
align-items: center;
justify-content: center;

两个都将其垂直对齐，但内容未居中。知道如何居中吗？

.mx-navigationtree {
    background-color: $navigation-bg;
    display: inline-block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.navbar-inner>ul >li >a {
    color: black; //$navigation-color;
    background-color: white; //$navigation-bg;
    font-weight: bold; //$font-weight-normal;
    display:table-cell;
    vertical-align: middle;
}   

.navbar-inner>ul >li >a img {
    display:table-cell;
    vertical-align: middle;
}

<div class="mx-navigationtree">
  <div class="navbar-inner">
    <ul>
      <li><a href="#" class="mx-name-2f63aabf-9ade-4aac-96d7-768044c6b569-0 dropdown" data-item-id="2f63aabf-9ade-4aac-96d7-768044c6b569-0"><img src="http://localhost:8080/img/img$briefcase_small_blue.png?636779626789785643"> List</a></li>
      <li><a href="#" class="mx-name-2f63aabf-9ade-4aac-96d7-768044c6b569-1 dropdown" data-item-id="2f63aabf-9ade-4aac-96d7-768044c6b569-1"><img src="http://localhost:8080/img/img$briefcase_small_blue.png?636779626789785643"> Card</a></li>
      <li><a href="#" class="mx-name-2f63aabf-9ade-4aac-96d7-768044c6b569-2 dropdown" data-item-id="2f63aabf-9ade-4aac-96d7-768044c6b569-2"><img src="http://localhost:8080/img/img$briefcase_small_blue.png?636779626789785643"> Chart</a></li>
    </ul>
  </div>
</div>

Answer 1

使用display：table-cell和vertical align中间不是必须的。

看看替代解决方案。

.mx-navigationtree {
    background-color: $navigation-bg;
    display: inline-block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width:100%;
}

.navbar-inner>ul >li{
  clear:both;
  text-align:center;
  list-style:none;
  border-bottom:1px solid #efefef;
}
.navbar-inner>ul >li >a {
    color: black; //$navigation-color;
    background-color: white; //$navigation-bg;
    font-weight: bold; //$font-weight-normal;
    text-decoration:none;
    line-height:50px;
    display:inline-block;
    width:100%;
}   

.navbar-inner>ul >li >a img {
    float:left;
    width:50px;
    height:50px;
}

<div class="mx-navigationtree">
  <div class="navbar-inner">
    <ul>
      <li><a href="#" class="mx-name-2f63aabf-9ade-4aac-96d7-768044c6b569-0 dropdown" data-item-id="2f63aabf-9ade-4aac-96d7-768044c6b569-0"><img src="http://localhost:8080/img/img$briefcase_small_blue.png?636779626789785643"> List</a></li>
      <li><a href="#" class="mx-name-2f63aabf-9ade-4aac-96d7-768044c6b569-1 dropdown" data-item-id="2f63aabf-9ade-4aac-96d7-768044c6b569-1"><img src="http://localhost:8080/img/img$briefcase_small_blue.png?636779626789785643"> Card</a></li>
      <li><a href="#" class="mx-name-2f63aabf-9ade-4aac-96d7-768044c6b569-2 dropdown" data-item-id="2f63aabf-9ade-4aac-96d7-768044c6b569-2"><img src="http://localhost:8080/img/img$briefcase_small_blue.png?636779626789785643"> Chart</a></li>
    </ul>
  </div>
</div>

垂直li内容不在中心对齐

1 个答案: