向右垂直对齐

Question

如何将这两个图标与float: right对齐？

plunkr

HTML

<li>
  <img src="https://graph.facebook.com/102031900129645/picture?type=square" />
  <a href=""> Johnny Smith </a>
  <span class="">
    <i class="fa fa-check"></i>
    <i class="fa fa-close"></i>
  </span>
</li>

CSS

li {
  width: 200px;
  list-style-type: none;
}

img {
  vertical-align: middle;
}

span {
  float: right;
  vertical-align: middle; // not working
}

Answer 1

如果要将图标与文本对齐，请使用span

.span {
    float: right;
    padding-top: 15px;
}

这样简单。

Answer 2

浮动元素不服从vertical-align。您需要display: inline-block;代替：http://plnkr.co/edit/zTdoW4TBUbREzI4ADTQO?p=preview

Answer 3

您可以使用line-height：

执行此操作

span {
  float: right;
  line-height: 50px;
}

http://plnkr.co/edit/bE1dEvtEp60SpiobfUje?p=preview