How can I vertically align an icon with two buttons? - html

Question

I would like to place an icon between two buttons. The icon is larger than the buttons and I would like their centers to be on a line. This means that the icon is a bit above and below the buttons.
A simple way to do this is a button group. Unfortunately, the icon is rounded off and buttons in a button group have sharp edges to neighbours in the group and the icon is rescaled to the same size as the buttons:
So I tried to get rid of the button-group. Bootstrap has an align-middle class for vertical alignment. But I can't get this to work. It looks like this:
I browsed and found this: How to center an element horizontally and vertically?
The answer lists a variety of approaches. I would like to stick with bootstrap and avoid custom css as far as possible. But one of the options sounded really good to me: Using justify and align in a flexbox container. Bootstrap containers are flexboxes, so I wrapped my buttons in a container and added align-items: center; justify-content: center;. Same result as the align-middle picture above.
I tried a variety of other css combinations, without any success. The three approaches above seem the cleanest to me, so I presented them here.
A fiddle: https://jsfiddle.net/aq9Laaew/285443/
html (assuming that you have bootstrap and fontawesome):
<!-- using a flexbox container + css -->
<div class="container" style="align-items: center; justify-content: center;">
<button type="button" class="btn btn-outline-secondary">
<i class="far fa-times-circle" style="color:red;"></i>
</button>
<i class="far fa-question-circle fa-3x" style="color: lightskyblue"></i>
<button type="button" class="btn btn-outline-secondary">
<i class="far fa-check-circle" style="color:green;"></i>
</button>
</div>
<br>
<!-- using the bootstrap align-middle class -->
<div class="align-middle">
<button type="button" class="btn btn-outline-secondary">
<i class="far fa-times-circle" style="color:red;"></i>
</button>
<i class="far fa-question-circle fa-3x" style="color: lightskyblue"></i>
<button type="button" class="btn btn-outline-secondary">
<i class="far fa-check-circle" style="color:green;"></i>
</button>
</div>
<br>
<!-- using a button group -->
<div class="btn-group" role="group" aria-label="Basic example">
<button type="button" class="btn btn-outline-secondary">
<i class="far fa-times-circle" style="color:red;"></i>
</button>
<span><i class="far fa-question-circle fa-3x" style="color: lightskyblue"></i></span>
<button type="button" class="btn btn-outline-secondary">
<i class="far fa-check-circle" style="color:green;"></i>
</button>
</div>
Potential duplicates (this is a very common question):
Bootstrap vertical align The answer works on a grid of rows and cols. I prefer not to introduce a grid.
Vertically align elements using CSS No answer has been accepted and the hints are similar to the answer I included in the main text.

Answer 1

Not 100% sure on what you want but if you want to align the buttons, then you can also use bootstrap flexbox and bootstrap text color instead of additional styling: (Edited: align-self-center vs align-items-center)
<div class="d-flex justify-content-start">...</div>
<div class="d-flex justify-content-end">...</div>
<div class="d-flex justify-content-center">...</div>
<div class="d-flex justify-content-between">...</div>
<div class="d-flex justify-content-around">...</div>
<link href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" rel="stylesheet"/>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="d-flex justify-content-start align-items-center">
<button type="button" class="btn btn-outline-secondary">
<i class="far fa-times-circle text-danger"></i>
</button>
<i class="far fa-question-circle fa-5x" style="color: lightskyblue"></i>
<button type="button" class="btn btn-outline-secondary">
<i class="far fa-check-circle text-success"></i>
</button>
</div>
<br/>
<div class="d-flex justify-content-start">
<button type="button" class="btn btn-outline-secondary align-self-center">
<i class="far fa-times-circle text-danger"></i>
</button>
<i class="far fa-question-circle fa-4x" style="color: lightskyblue"></i>
<button type="button" class="btn btn-outline-secondary align-self-center">
<i class="far fa-check-circle text-success"></i>
</button>
</div>