How to center image in `<span>` tag?

[![enter image description here](https://i.stack.imgur.com/40IL0.png)](https://i.stack.imgur.com/40IL0.png)

```
<div class="col-1">
     <span class="dot">
           <h:graphicImage library="imgs" name="campus.png" width="25" height="25" style="align-content-center"/>
     </span>
</div>

```

**dot** css

```
.dot {
     height: 75px;
     width: 75px;
     background-color: #bbb;
     border-radius: 50%;
     display: inline-block;
}

```

Don't worry about `h:graphicImage`, it is a **JSF** tag which translates to `<img>` in html. Any html class can be applied to it.

I am using [Bootstrap 4.3](https://getbootstrap.com/).