我有一个在ajax响应后调用的javascript函数。它包含这段代码:
// 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的CSS:
#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不是居中的。我尝试了一系列带有margin auto的方法,并创建了一个父div并向其添加了left属性以及保存内容的实际div。
知道如何将这一切联系在一起吗?
由于 埃里克
答案 0 :(得分:1)
如果您知道div的大小,可以试试这个:
#animated_status_message{
left: 50%;
width: 400px (just an example);
margin-left: -200px (the width of the div divided by two);
}
答案 1 :(得分:1)
使用position:fixed;
margin: 0 auto;
无效。我会设置像托比亚斯建议的固定(或百分比)宽度。
答案 2 :(得分:0)
试试这个
// 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);