How to vertically center span with float:right in div?

Question

<div class="card">
  <div class="card-header">
    <h5>TEST</h5>
    <span class="fa fa-info"></span>
  </div>
  <div class="card-body">
    <div class="card-text">
      TEXT<br />
      TEXT<br />
      TEXT<br />
      TEXT<br />
    </div>
  </div>
</div>

.card {
  width: 200px;  
}

.card-header h5 {
  display: inline;
}

.card-header span {
  float: right;
}

In this example fa icon in span is align to top.

How can I vertically align this span?

jsfiddle: http://jsfiddle.net/zj3cubtd/

If you know you ever gonna use only one H5 line, you can simply add line-height to the element: .card-header span { line-height: 1.6875; }. — Mirous, Sep 20 '18 at 19:27

score 1 · Accepted Answer · answered Sep 20 '18 at 19:22

1

This is a good use case for flexbox. Add the following css and it should work as expected:

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.card-header h5 {
  margin: 0; /* It doesn't need 'display: inline'. Just get rid of its margin */
}

answered Sep 20 '18 at 19:22

Christopher Bradshaw

2,615
4
24
38

Thanks. Is it possible to center h5? – tinex Sep 20 '18 at 19:55
Do you mean that you want the h5 centered horizontally (with the span still staying to the right)? – Christopher Bradshaw Sep 20 '18 at 20:00
Yes, I would like that – tinex Sep 20 '18 at 20:01
If you add `width: 100%;` and `text-align: center;` to `.card-header h5`, that should do the trick. – Christopher Bradshaw Sep 20 '18 at 20:22

score -2 · Answer 2 · answered Sep 20 '18 at 19:31

Hope this will work.

.card {
  width: 200px;  
}

.card-header h5 {
  display: inline;
}

.card-header span {
  float: right;
}
.card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

<div class="card">
  <div class="card-header">
    <h5>TEST</h5>
    <span class="fa fa-info"></span>
  </div>
  <div class="card-body">
    <div class="card-text">
      TEXT<br />
      TEXT<br />
      TEXT<br />
      TEXT<br />
    </div>
  </div>
</div>

How to vertically center span with float:right in div?

2 Answers2