我正在尝试使烤面包机消息框居中对齐，即使消息长度有所不同。烤面包机的宽度应根据消息而有所不同。请在CSS代码中查看我的内联注释。那就是我很困惑。
我的密码
的HTML
<body>
<div class="alert alert-danger toast">
<span class="msgText"></span>
</div>
<div class="moreHeight"></div>
</body>
的CSS
.toast {
margin: 0px auto;
position: fixed;/*This is must for me. Toaster should be in same place even I scroll to bottom.*/
z-index: 9999;
margin-left: 35%;/*Should not be hardcoded since message length is not static*/
/* width :50%;/*Need to be removed. Width should be dynamic based on messahe length*/
}
/*To check on scrolling toaster is visible at top*/
.moreHeight{
height:1200px;
}
JS
$( document ).ready(function() {
var msg = "Small Message";
//var msg = "Leeeeeeeeeeeeeeeeeeeeeeeeeengthy Message is here";
$(".msgText").text(msg);
$(".alert").show();
});
按原样使用以下cssposition:fixed代替margin
.toast {
left: 50%;
position: fixed;
transform: translate(-50%, 0px);
z-index: 9999;
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句