htmlcsspositioning

How to place in center if two images

I have created this website. And now, I would like to center text on those two images in header. Relevant code is here

<div class="header">
    <img src="css/title578145459.png" class="headerImage left"/>
    <img src="css/title756941752.png" class="headerImage right"/>
    <span class="headerText">Ubytovna Stavařov Přerov</span>
</div>

and CSS

.headerImage {
    width: 50%;
    height: 100%;
}

.header {
    position: relative;
    height: 190px;
    text-align: center;    
    padding-top: 5px;
    opacity: 0.8;
}

.headerText {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: -1;
    color: yellow;
    font: normal 3em sling;
    font-style: oblique;
}

I tried to set different values to top and bottom attributes, also I've tried to set padding and margin but neither of these have worked.

Solution

  • Your z-index on .headerText should be positive. Using Chrome dev tools I was able to see the text using this:

    .headerText {
position: absolute;
top: 120px;
left: 0px;
right: 0;
z-index: 1;
}