I have the following markup in a Twitter Bootstrap web application.
<div class="row">
<div class="col-6">
<h1>
Life Areas
<img src="/images/Info.png">
</h1>
</div>
<div class="col-6 text-right align-middle">
<a id="add-area"><img src="/images/add_l.png" title="Add Life Area"></a>
<a href=""><img src="/images/brain_l.png" title="Brainstorm Goals"></a>
</div>
</div>
I would like the icons on the right to be centered vertically. But the align-middle class, along with vertical-align: middle seem to have no effect.
How could I vertically center the icons on the right, preferably the Bootstrap way?