在图像上叠加文本并仅使用 css and/or HTML 对齐所有中心

Question

我已经通读了几篇关于在图像上叠加文字和居中的帖子。 None 的答案适用于我的情况。下面是我正在使用的 HTML 和 CSS。坦率地说 - 我发现唯一可以使我的图像在我的文本下居中的方法是恢复使用标签！至少可以说我很沮丧。

它"should"真的很简单，但它不是！

#header
{
    height: 140px;
    position: relative;
     /*background: url('http://i105.photobucket.com/albums/m229/ayliea/ColeensDA_Avatar_zps7d63fb7c.jpg');
   background-color: #E7D4DE; for testing background colors*/
    background-repeat: no-repeat;
    background-position: center top;
    font-family: Segoe Script, Lucida handwriting, brush script mt, 
    monotype cosira, Apple Chancery, comic Sans MS Italic;
    top: 10px;
}
}
#header p
{font-size: 1.25em; font-weight: normal;}
#header .imgcenter
{
    display: inline-block;
    margin-left: auto;
    margin-right: auto;
    
    z-index:100;
}
.topcenter
{
    position: absolute;
    top: -20px;
    text-align: center;
    width: 100%;
    font-weight: bold;
    color: #0200a1;
    font-size: 1.5em;
    text-decoration: none;
} 
.topmiddle
{
    position: absolute;
    top:3.5em;
    text-align: center;
    width: 100%;
    padding: 4px;
    color: #c0c0c0;
    font-weight: bold;
    line-height:1.1em;
}

<div id="header">
         <img class="imgcenter" src="http://i105.photobucket.com/albums/m229/ayliea/ColeensDA_Avatar_zps7d63fb7c.jpg" alt="Aylissa"  />
     <div class="topcenter">
     <p><a href="default.aspx">Testing My text overlay with<br />trademark symbol and link<sup>&#174;</sup></a></p>
     </div>
     <p class="topmiddle">Second line of text that<br />
     needs centered on top of image</p> </div>

但除非我使用老式标签，否则我似乎无法将该死的图像同时置于中心并显示（有时它会消失！）或让文本正确覆盖它！

谁能帮我解决这个问题？

P.S。我使用了此处的建议：http://www.the-art-of-web.com/css/textoverimage/ 进行叠加。

感谢您的帮助。

Answer 1

您只是缺少将 text-align: center; 添加到您的 #header

并且请注意，background-repeat: no-repeat; 和 background-position: center top; 在您的 css 中是无用的属性，因为它只会影响您添加为 background-image 的任何图像。它不会对 html img

做任何事情

第二个注意事项：您还可以删除 .imgcenter 中的 margin-left: auto;、margin-right: auto; 和 z-index:100;，以获得更清洁的 css sheet（z-index 永远不会对任何元素起作用，除非你在该元素中添加一个非静态的位置，position:static 默认情况下是每个 html 元素的位置。）

在图像上叠加文本并仅使用 css and/or HTML 对齐所有中心

Overlay text over an image and align ALL center using only css and/or HTML

html

css

image

centering