CODEWITHSUNDEEP
htmlcss
Daniel Minnaar
Daniel Minnaar

Reputation: 6295

Why won't my text align over the centre of the image?

I'm trying to align my header text in the middle of the page, over the image. The image is aligned in the centre, but the text is to the left of the page.

Here is how it looks.

I tried to copy this solution, but I'm obviously not doing something right. Any help would be really appreciated. HTML:

    <header>
        <div class="tag">
            <h1>Some text here</h1>
            <h3>And more text here</h3>
        </div>
        <img src="http://www.placehold.it/900x300">
    </header>

CSS:

    header {
      height: 200px;
      line-height: 50px;
      text-align: center;
      background: #303e49;
      position: relative;
    }

    .tag {
         text-align: center;
         background: #303e49;
         position: absolute;

    }

Upvotes: 4

Views: 97

Answers (1)

Mohamed-Yousef
Mohamed-Yousef

Reputation: 24001

1st you shouldn't tagged jquery cause its css

2nd add left 0 and right 0 to your absolute element to get the full width of the contain div

.tag {
         text-align: center;
         background: #303e49;
         position: absolute;
         left: 0;
         right: 0;
         z-index : 1;
    }

Upvotes: 4

Related Questions