After trying multiple solutions found on stackoverflow that have worked for others, I am still struggling to center an image vertically. The image sits in the top right corner of a navigation bar with a red border for visibility. Despite my efforts, there is a noticeable gap below the image, indicating that it is not centered vertically within its container. I'm looking for help in finding a better way to achieve this alignment.
It's worth noting that I have managed to center the image using position:relative; bottom:-5px;. However, I am exploring alternative methods.
HTML:
<div id="nav-userOptions" class="col-xs-4">
<div class="row">
<a href="#">
<div class="col-xs-6" ng-click="create_show=true" style="border:1px solid red;">
<div style="height:60px">
<i class="fa fa-plus-circle" style="font-size:60px; border:1px solid red;"></i>
</div>
<div>
Create
</div>
</div>
</a>
<a href="#">
<div class="col-xs-6" style="border:1px solid red;" >
<div style="height:60px; vertical-align:middle; float:none; display:inline-block; border:1px solid red;">
<img src="img/loggedIn/profilePic.jpg" height="52" width="52" style="border:1px solid red">
</div>
<div>
Account
</div>
</div>
</a>
</div>
</div>
<!-- end nav-userOptions -->
CSS:
#nav-userOptions {
text-align: center;
color:#20a0d8;
}
#nav-userOptions a {
color:#20a0d8;
}