CODEWITHSUNDEEP
htmlcss
user2954587
user2954587

Reputation: 4871

float right vertically align

How can I align these two icons with a 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
}

Upvotes: 3

Views: 68

Answers (3)

Johan Karlsson
Johan Karlsson

Reputation: 6476

You can do it with line-height:

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

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

Upvotes: 0

Lucian
Lucian

Reputation: 644

Floated elements don't obey vertical-align. You need display: inline-block; instead: http://plnkr.co/edit/zTdoW4TBUbREzI4ADTQO?p=preview

Upvotes: 0

Billy Purvis
Billy Purvis

Reputation: 245

If you want to align the icons with the text, for span

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

Simple that way.

Upvotes: 1

Related Questions