在横幅中间居中文本？答案

【问题标题】：Center text on middle of a banner?在横幅中间居中文本？
【发布时间】：2016-04-28 00:26:59
【问题描述】：

如何创建横幅并在其中间居中？

我尝试在 Wrapper 上使用相对位置，在图像 div 上使用绝对位置，但无法定位。

#banner {
  position: relative;
  width: auto;
}
#banner_wrap img {
  position: absolute;
  top: 150px;
  left: 50px;
}

<div id="banner">
  <div id="banner_wrap">
    <img src="fe_bg_login_.png" />
    <div id="rockstar">
      <h1>I am a Rock Star Dude!</h1>
    </div>
  </div>
</div>

【问题讨论】：

text-align 是您要查找的属性。
How do I center text on top of an image in both dimensions?的可能重复

标签： html css

【解决方案1】：

您可以使用text-align: center; 来执行此操作。

JSFiddle 来看看。

【讨论】：

【解决方案2】：

text-align: center; 属性可以让你这样做。

#banner {
  position: relative;
   width: auto;
  background: #333; color: #fff;
  text-align :center;
}

如果您在横幅中使用text-align: center，absolute 位置的图像将不会居中，这就是为什么我删除了该绝对位置并将其放在标题之后以获得相同的行为。

Fiddle

来源： https://developer.mozilla.org/en-US/docs/Web/CSS/text-align

【讨论】：

【解决方案3】：

我想这就是你要找的东西：

h1 {
    text-align: center;
}

【讨论】：