テキストは中央になりませんか？

Question

DIVの中央にテキストが配置されていないという問題があります。

私が試してみました：

text-align:center; 

と

width:225px; /*width of div*/ 
margin:0px auto; 

をし、それが中央に配置されないだろう。

ここには、DIVのHTMLとCSSがあります。

HTML

<div id="past"> 
<h3><a href="/artistphotos/">View Past Messages</a></h3> 
</div> 

CSS

#past{ 
    position:absolute; 
    left:0; 
    top:363px; 
    width:225px; 
    height:50px; 
    background-image:url('../images/members/roundedbox.png'); 
    z-index:10; 
} 

私はページを構築している間にインラインスタイルを使用して、テキスト整列およびマージンを適用しています。 div、h3、a要素に適用していますが、いずれの要素でも動作しません。

私はここで何が欠けていますか？ありがとう！これは、多くのコードが続く（ヘッダーとフッター要素を除く）

<div class="center over_all_under"> 
</div> 
<!--[if !IE]>start intro<![endif]--> 
<div class="center"> 
</div> 
<!--[if !IE]>end intro<![endif]--> 
<!--[if !IE]>strat main<![endif]--> 
<div class="wrap_fullwidth" id="main"> 
<div class="center"> 
<br /> 
<div id="homepage"> 
    <div id="homepage-main"> 
     <div id="homepage-main-item" class="full_shadow>{module_adrotator,5622} 
     <div id="past"> 
      <h3><a href="/artistphotos/">View Past Messages</a></h3> 
     </div> 

：ここ

はHTMLコードです。私はここにそれを貼り付けることができますが、それは読みにくいので、私はdivの上にコードを含めただけです。

Answer 1

text-align:center;私のために正常に動作します：http://jsfiddle.net/mrchief/bhtZe/

#past { 
    position:relative; 
    left:0; 
    top:363px; 
    width:225px; 
    height:50px; 
    background-image:url('../images/members/roundedbox.png'); 
    z-index:10; 
    text-align:center;  
} 

更新：ページを見た後、それが中央揃え（それは絶対位置を取得します）からのhrefを妨げているよう#past h3からposition: absoluteを削除します。

また、divの幅は小さく、親の背景に合わせる場合は#past widthから100%に設定してください。

Answer 2

あなたが持っているのは、position:absoluteです。絶対配置された要素は、流れから取り除かれ、marginは何も意味しません。

100%の幅を持つ別の絶対配置されたDIVの内側に画像を置くことで画像をセンタリングすることができます。次に#pastをrelativeの位置にして、マージントリックを使用します。

はここで働い例です：あなた#past CSSルールの内部http://jsfiddle.net/c5xaW/

Answer 3

、これを追加します。それは動作するはずです

text-align: center; 

。私はそれを試したhere。ルールを追加して削除し、何が起こるかを確認してください。