横幅中间的中心文字？

Question

如何在中间创建横幅和中心文字？

我试图在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>

Answer 1

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

JSFiddle看到它。

Answer 2

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

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

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

Fiddle

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

Answer 3

我认为这就是你要找的东西：

h1 {
    text-align: center;
}