Why won't my text center the image?

I am trying to align the title text in the middle of the page above the image. The image is centered, but the text is to the left of the page.

Here is how it looks.

I tried to copy this solution, but I obviously am not doing anything right. Any help could be helpful. 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;

    }
+4
source share
1 answer

1st, you should not mark jquery calling it css

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

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

Source: https://habr.com/ru/post/1616371/


All Articles