html - Bootstrap 4 : Vertical align floated element in a list

Question

如何将 fontawesome 图标 float 到右侧并仍然使其垂直居中对齐？我尝试过使用 ml-auto 和 Flexbox，但它不起作用。

这是我的代码:

<ul class="list-group flex-column">
  <li class="list-group-item py-2 d-flex justify-content-start">
    <a href="#">
      <img src="https://placehold.it/40x40" height="40" class="mr-4">
      <span>Text Here</span>
      <i class="fa fa-angle-right ml-auto" aria-hidden="true"></i>
    </a>
  </li>
</ul>

有人可以帮我吗？谢谢!

Answer 1

使用 flex 和 sizing 辅助类使链接成为具有 2 个子项的 flex 父项 - 您想要的内容位于左侧，内容位于右侧。使用 .justify-content- Between, .align-items-center 分隔内容，使箭头位于右侧并垂直居中。

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<ul class="list-group flex-column">
  <li class="list-group-item py-2 d-flex">
    <a href="#" class="d-flex w-100 justify-content-between align-items-center">
      <span>
      <img src="https://placehold.it/40x40" height="40" class="mr-4">
      <span>Text Here</span>
      </span>
      <i class="fa fa-angle-right ml-auto" aria-hidden="true"></i>
    </a>
  </li>
</ul>