CSSの位置付けの問題

Question

私はこのajax応答の後に呼び出されるjavascript関数を持っています。

#animated_status_message{ 
    background-color: orange; 
    color: black; 
    font-weight: bold; 
    border: 1px solid black; 
    margin-top: 2px; 
    padding: 20px; 
    z-index: 1000; 
    max-width: 80%; 
    position:fixed; 
    opacity:0.92; 
} 

そして最後に、HTML：：

<div id="animated_status_message" style="top: -60px;"></div> 

javascriptのは、おそらくここでは必要ありませんが、これはdiv要素のCSSです

// If there is a notification already, clear it and restart with the new notification. 
try {clearTimeout(timeout_handle);} 
catch(err){} 

$('#animated_status_message').html(
    'this is a status message' 
); 
$("#animated_status_message").animate({top:"0"},{duration:400}) 
timeout_handle = setTimeout("$('#animated_status_message').animate({top:'-60px'},{duration:400})", 4000); 

：それは、このコードのビットが含まれています念のため。

問題は、divが中央揃えされていないことです。私は余白の自動と親divを作成し、それに左のプロパティを追加し、コンテンツを保持する実際のdivを持つメソッドの束を試してみました。

私はこれをどのように結びつけることができますか？

おかげ エリック

Answer 1

あなたはこれを試みることができるのdivのサイズを知っている場合：

#animated_status_message{ 
    left: 50%; 
    width: 400px (just an example); 
    margin-left: -200px (the width of the div divided by two); 
} 

Answer 2

この

// If there is a notification already, clear it and restart with the new notification. 
try {clearTimeout(timeout_handle);} 
catch(err){} 

$('#animated_status_message').html(
    'this is a status message' 
); 
$("#animated_status_message").animate({top:"0px"}, 400); 
timeout_handle = setTimeout(function(){ 
$('#animated_status_message').animate({top:'-60px'}, 400) 
}, 4000); 

Answer 3

でposition:fixed;margin: 0 auto;が動作しません試してみてください。私は、Tobiasのように固定幅（またはパーセンテージ）を設定します。