Aligning multiple images in Bootstrap - html

Question

I have two image images that I cant work out how to align in the centre of my container, I have tried using text-align and justify-content but nothing seems to be working. This is the same for my nav bar where I cant work out how to align the text to the right but keep the logo to the left of the bar, which I though would be the text-align? Thanks
<style>
.buttons-1{
background-color: darkgray;
padding-top: 30px;
text-align: center;
}
.row-1{
background-color: ghostwhite;
}
.photography {
opacity: 1;
display: block;
width: 100%;
height: auto;
transition: .5s ease;
backface-visibility: hidden;
}
.middle {
transition: .5s ease;
opacity: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%)
}
.fadehover:hover img {
opacity: 0.3;
}
.fadehover:hover .middle {
opacity: 1;
}
.text {
background-color: gray;
color: greenyellow;
font-size: 16px;
padding: 16px 32px;
}
.col-md-3{
padding: 0;
}
.container-fluid {
height:100%;
min-height: 100%;
}
.row{
width:100%;
margin:0;
padding:0;
height:100%;
}
</style>
<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">
<a class="navbar-brand" href="#">
<img src="Photos/logowhite.png" alt="logo" style="width:40px;"></a>
<ul class="nav navbar-nav navbar-right">
<li class="nav-item">
<a class="nav-link" href="photography.html">Photography</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 3</a>
</li>
</ul>
</nav>
<div class="container-fluid buttons-1 ">
<div class="row ">
<div class="col-md-3 d-none d-md-block photography fadehover">
<a href="photography.html">
<img src="Photos/Buttons/photography%20button.png" alt="Photography" class="img-fluid photography"/>
<div class="middle">
<div class="text">Photography</div>
</div>
</a>
</div>
<div class="col-md-3 d-none d-md-block photography fadehover">
<a href="photography.html">
<img src="Photos/Buttons/photography%20button.png" alt="Photography" class="img-fluid photography"/>
<div class="middle">
<div class="text">Other</div>
</div>
</a>
</div>
</a>
</div>
</div>
</div>

Answer 1

Sse the css
.fadehover{text-align:center !important; display:block;}