CODEWITHSUNDEEP
htmlcss
piseynir
piseynir

Reputation: 225

top center text in an image css-html

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:

Not OK

This is what i want:

OK

Upvotes: 0

Views: 188

Answers (5)

Kudah Shambare
Kudah Shambare

Reputation: 39





    #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/

Upvotes: 0

Kayahan Kahrıman
Kayahan Kahrıman

Reputation: 648

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>

Upvotes: 0

Morgan
Morgan

Reputation: 52

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>

Upvotes: 1

Nitheesh
Nitheesh

Reputation: 20006

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>

Upvotes: 0

piseynir
piseynir

Reputation: 225

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;
}

Upvotes: 0

Related Questions