将浮动元素向右对齐并垂直居中

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
}

- user2954587

Answer 1

如果您想将图标与文本对齐，针对span元素进行操作。

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

简单如此。

- Billy Purvis

Answer 2

浮动元素不遵守 vertical-align 属性。你需要使用 display: inline-block; 替代：http://plnkr.co/edit/zTdoW4TBUbREzI4ADTQO?p=preview

- Lucian

Answer 3

你可以使用 line-height 来实现：

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

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

- Johan Karlsson