Question

即使消息长度不同，我也试图将烤箱消息框对齐。烤面包机宽度应根据消息而变化。请查看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();
    });

Plunker Demo

Answer 1

使用以下css，因为它是position:fixed而不是margin

.toast {
    left: 50%;
    position: fixed;
    transform: translate(-50%, 0px);
    z-index: 9999;
}

<强> Updated plnkr

需要将烤箱对齐并使其固定

1 个答案: