top center text in an image css-html - html

Question

I' m super new at html and css. I started to learn yesterday.
I want to top-centered a text in an image.
Here is my html and css codes but I don't figure it out how to do it.
HTML
<div class="button">
<a href="#" class="building">
<img src="{% static 'images/imal.svg' %}" alt="buildinglogo">
<h3>Lastik İmal</h3>
</a>
CSS
.building h3{
font-family: Montserrat;
font-style: normal;
font-weight: 600;
font-size: 40px;
line-height: 49px;
text-align: center;
align-items: center;
color: var(--white);
background-color: var(--black);
}
Here is my output:
This is what i want:

Answer 1

As suggested byMinal Chauhan you can use position: absolute; top: 50px; left: 50px;
.building h3{
font-family: Montserrat;
font-style: normal;
font-weight: 600;
font-size: 40px;
line-height: 49px;
text-align: center;
align-items: center;
color: var(--white);
background-color: var(--black);
position: absolute;
top: 50px;
left: 50px;
}
<div class="button">
<a href="#" class="building">
<img src="https://picsum.photos/300/400" alt="buildinglogo">
<h3>Lastik İmal</h3>
</a>
</div>

Answer 2

I changed the html and css codes like below and problem solved;
HTML
<div class="button">
<a href="#" class="building">
<img src="{% static 'images/imal.svg' %}" alt="buildinglogo">
<h3>Lastik İmal</h3>
</a>
CSS
.building h3{
position: absolute;
font-family: Montserrat;
font-style: normal;
font-weight: 600;
font-size: 40px;
line-height: 49px;
text-align: center;
color: var(--white);
background-color: var(--black);
margin-left: 25px;
margin-top: 47px;
}

Answer 3

Add position: absolute; to .building h3
.building img {
width: 100%;
}
.building h3 {
font-style: normal;
font-weight: 600;
font-size: 40px;
line-height: 49px;
text-align: center;
align-items: center;
position: absolute;
top: 0;
width: 100%;
}
<div class="button">
<a href="#" class="building">
<img src="https://www.w3schools.com/html/pic_trulli.jpg" alt="buildinglogo">
<h3>Lastik İmal</h3>
</a>
</div>
<p>Text content</p>

Answer 4

You should use relative on parent element to position child element.
I made comments in code.
a {
position: relative;
display: inline-block; // you need that for a tag's width / height value
}
a img {
position: relative; // you need that to position h3 properly
z-index: 1
}
a h3 {
position: absolute;
top: 15px;
left: 50%;
transform: translateX(-50%);
z-index: 2;
}
<a href="#">
<img src="//via.placeholder.com/250x400">
<h3>Lastik İmal</h3>
</a>

Answer 5

#image-text{
position:absolute;
left:25%;
top:5%;
}
<!-- HTML-->
<div id="container">
<img src="" alt="Image">
<div id="image-text"> Text </div>
</div>
The above snippet might help you to solve your problem. Adjust CSS left and top values according to your page structure. For further study read:
https://www.w3schools.com/howto/howto_css_image_text_blocks.asp
https://www.geeksforgeeks.org/how-to-place-text-on-image-using-html-and-css/