html - 2枚の画像を中央に配置する方法

Question

このウェブサイトを作成しました。そして今、私はヘッダーのそれらの2つの画像にテキストを集中させたいと思います。関連コードはこちら

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

および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;
}

topとbottom属性に異なる値を設定しようとしました。また、設定しようpaddingとしましmarginたが、どちらも機能しませんでした。ヒントをありがとう。

Answer 1

.headerTextのz-indexは正である必要があります。Chrome開発ツールを使用して、これを使用してテキストを表示することができました。

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

Answer 2

これを試して

.headerText {
position: absolute;
top: 50%;
left: 25%;
right: 25%;
z-index: 1;
}