バナーの中央にテキストがありますか？

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;プロパティを使用するとそのようにすることができます。あなたがバナーにtext-align: centerを使用する場合

absolute位置に

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

画像は、私はその絶対位置を削除し、同じ動作を取得するために、見出しの後にそれを置く理由です、センタリングされることはありません。

Fiddle

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

Answer 3

私は、これはあなたが探しているものだと思う：

h1 { 
    text-align: center; 
}