Question

我创建了this网站。现在，我想在标题中将这两个图像的文本居中。相关代码在这里

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

如果两个图像如何放在中心

2 个答案: