html - 在背景顶部对齐文本中心

Question

我是 html 和 css 的新手，很抱歉，如果这是一个“重复”，我找不到适合我的答案，但也许我有一个单独的问题。我在此处使用此 CSS 代码设置了背景:

.background {
position: fixed;
top: -50%;
left:-50%;  
width: 200%; 
height: 200%;
}
.background img { 
position: absolute;
top: 0; 
left: 0; 
right: 0; 
bottom: 0; 
margin: auto; 
min-width: 50%;
min-height: 50%;
}

并在此处的 HTML 中使用了它:

<div class="background"><img src="lol_background.png" alt="League Champion Background" /></div>

现在，我试图将标题置于该背景之上，但出于某种原因我无法弄清楚，标题的 CSS 在这里:

#headtxt {
position: absolute;
text-align: center;
margin: auto;
z-index: 100;
color: pink; 
}

我在 HTML 中这样调用它:

<h1 id="headtxt">Before and After: League AP Item Changes</h1>

所以，这是我尝试过的:当我删除 position: absolute 时，文本落在背景后面。显然现在，text-align: center; 似乎什么也没做。所以我不太确定发生了什么，但我认为这是一些蹩脚的菜鸟错误。

Answer 1

position 属性设置为 absolute 的元素的宽度是自动确定的。要使文本居中，您必须将 #headtext 的宽度设置为 100%。

.background {
  position: fixed;
  top: -50%;
  left:-50%;  
  width: 200%; 
  height: 200%;
}
.background img { 
  position: absolute;
  top: 0; 
  left: 0; 
  right: 0; 
  bottom: 0; 
  margin: auto; 
  min-width: 50%;
  min-height: 50%;
}
#headtxt {
  position: absolute;
  text-align: center;
  margin: auto;
  z-index: 100;
  color: pink; 
  width: 100%;
}

<div class="background">
  <img src="http://lorempixel.com/640/480/nature" />
</div>

<h1 id="headtxt">Before and After: League AP Item Changes</h1>