Przyznam szczerze, że nie bardzo wiem co tu się dzieje. Obrazki w spanach, stylowanie bezpośrednio w HTML. Masakra jakaś.
Jeśli chcesz wyśrodkować divy to zamknij je we wraperze i nadaj im w css display: flex oraz justify-content: center.
Tutaj przykład jak można to zrobić:
CSS:
.container-wrapper {
display: flex;
justify-content: center;
}
.image-wrapper {
display: block;
position: relative;
z-index: 1;
margin: 0 30px;
}
.image-text {
position: absolute;
top: 50%;
left: 0;
width: 100%;
transform: translateY(-50%);
z-index: 2;
text-align: center;
padding: 20px 0;
background: rgba(0, 0, 0, .4);
}
HTML:
<div class="container-wrapper">
<a href="#" class="image-wrapper">
<img src="https://via.placeholder.com/300">
<span class="image-text"> Some image itext </span>
</a>
<a href="#" class="image-wrapper">
<img src="https://via.placeholder.com/300">
<span class="image-text"> Some image itext </span>
</a>
<a href="#" class="image-wrapper">
<img src="https://via.placeholder.com/300">
<span class="image-text"> Some image itext </span>
</a>
</div>