-3

I just started learning HTML. In my HTML there is a div containing an image and an h1 tag. Now the h1 is coming under the div. How to position that h1 on the center of the image?

<div class="headwrap">
    <div class="headimage"><img src="images/Header-image1.jpg">
    <h1 class="headtxt"> I Love Photography</h1>
    </div>
</div>

Css:

.headwrap {

    margin: 0;
    max-width: 1500px;
    width: 100%;
    height: 100%;


}

.headimage {

    max-width: 1500px;
    width: 100%;

}

.headtxt {

    margin: 0 auto;
    padding: 0;
    -webkit-margin-before: 0em;
    -webkit-margin-after: 0em;
    float: left;

}
Winter
  • 3,894
  • 7
  • 24
  • 56
design sanyasi
  • 3
  • 3
  • since you posted no code, well... we can't help you. It'd only be guessing. – Funk Forty Niner Dec 20 '16 at 23:00
  • 3
    Possible duplicate of [How to position text over an image in css](http://stackoverflow.com/questions/8708945/how-to-position-text-over-an-image-in-css) – 1000ml Dec 20 '16 at 23:43

1 Answers1

1

You can use position: relative on the parent element and then put position: absolute on the H1 tag:

.headwrap {

margin: 0;
max-width: 1500px;
width: 100%;
height: 100%;
position: relative;


}

.headimage {

max-width: 1500px;
width: 100%;

}

.headtxt {

position: absolute;
top: 0;

}