I have the following code in PHP:
JavaScript
x
<div class="col-lg-4 col-sm-6">
<br>
<a class="portfolio-box">
<div class="project-category">test-category</div>
<img class="img-fluid" src="assets/img/portfolio/5.jpg" alt="" />
<div class="portfolio-box-caption">
<div class="br"></div>
<div class="project-category text-white-50">test-category</div>
<div class="project-name">test-name</div>
<div class="br"></div>
<div class="project-description">test-description</div>
<div class="br"></div>
</div>
</a>
</div>
This code creates the following box:
The respective CSS code looks like this:
JavaScript
#portfolio .container-fluid .portfolio-box .portfolio-box-caption,
#portfolio .container-sm .portfolio-box .portfolio-box-caption,
#portfolio .container-md .portfolio-box .portfolio-box-caption,
#portfolio .container-lg .portfolio-box .portfolio-box-caption,
#portfolio .container-xl .portfolio-box .portfolio-box-caption {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
width: 95%;
height: auto;
position: absolute;
bottom: 0;
text-align: center;
opacity: 0;
color: #fff;
background: #963d32;
transition: opacity 0.25s ease;
padding-left: 40px;
padding-right: 30px;
padding-top: 15px;
padding-bottom: 15px;
}
#portfolio .img-fluid {
max-width: 95%;
height: auto;
}
However – no matter what I do – the textbox over the picture (as you can see in the picture above) is never perfectly centered.
How can I center the textbox over the picture?
Best
Advertisement
Answer
Changing the margin-left to 2.5% solved the problem for me. Thank you very much @bartholomew