Html 引导4：垂直对齐列表中的浮动元素

我怎样才能将一个图标向右浮动，并且使其垂直居中对齐？我尝试过使用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>

---

有人能帮我吗？谢谢

尝试使用此结构：

<ul class="list-group">
  <li class="list-group-item">
    <a class="w-100 d-flex align-items-center py-2" 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>

看到它在JSFIDLE中工作

---

您的

标记无法填充整个父项，因此您无法在图标上看到

ml auto

的效果。另外，

d-flex

必须在

a

标记中，而不是在

li

中使用flex和sizing助手类使链接成为一个

flex

父级，有两个子级-左边是您想要的内容，右边是内容。使用

.justify content between、.align items center

分隔内容，使箭头位于右侧并垂直居中

在这种情况下，请告诉我使用float而不是flex的好理由。垂直中对齐是什么意思？我尝试了你的代码，它与文本“text Here”垂直对齐@GerardReches我假设op是错误的，并且没有意识到bs4默认使用flex。我想他们只是指将图像向右对齐，然后垂直居中对齐。他们在

li

上有flex类，如果我的问题让人困惑，我很抱歉。我试着让图像在左边，文本在旁边，图标在右边浮动。但当我将其向右浮动时，它不会与其余元素对齐，而是粘附在顶部。如何修复此问题？您的图标似乎位于右侧并居中：-它位于链接的右侧，如果您的意思是完全位于li的右侧，那么您需要将链接拉伸100%：谢谢您，Michael！