根据文本长度调整快餐栏消息的大小[重复]答案

【问题标题】：Size snackbar message based on text length [duplicate]根据文本长度调整快餐栏消息的大小[重复]
【发布时间】：2021-04-15 23:27:35
【问题描述】：

当我的应用程序中有一个成功的补丁或帖子时，我会弹出一条快餐栏消息。根据正在更新的对象的上下文，这些消息有时可能很短或很长。

这最初设置为left: 50%，但我更改了它，因为有时消息方式未正确居中。无论文本有多长，如何使此小吃栏始终居中？

#snackbar {
     visibility: hidden;
     min-width: 250px;
     margin-left: -125px;
     background-color: $apple;
     color: #fff;
     text-align: center;
     border-radius: 5px;
     padding: 16px;
     position: fixed;
     z-index: 1;
     left: 40%;
     bottom: 30px;
 }

HTML如下

<body>
    <%= render "shared/sidenav" if current_user %>
    <div id=<%= "#{'main' if current_user}" %>>
      <% flash.each do |name, msg| %>
        <%= content_tag :div, msg, class: "alert alert-#{name}", id: 'alert' %>
      <% end %>
      <%= yield %>
      <div id="snackbar"></div>
    </div>
  </body>

Snackbar 在 HTTP 请求时可见。

【问题讨论】：

您好，请同时发布您的 HTML。还有一些你的 CSS 代码。

标签： html css

【解决方案1】：

您可以为此使用left: 50% 和transform: translateX(-50%) 的组合：

#snackbar {
  position: fixed;
  min-width: 250px;
  background-color: green;
  color: #fff;
  text-align: center;
  border-radius: 5px;
  padding: 16px;
  z-index: 1;
  left: 50%;
  transform: translateX(-50%);
  bottom: 30px;
}

<div id="snackbar">
  <p>Eleifend nec eget. Id massa quis eu vitae elit. Bibendum interdum semper. Donec libero duis.</p>
</div>

小例子

#snackbar {
  position: fixed;
  min-width: 250px;
  background-color: green;
  color: #fff;
  text-align: center;
  border-radius: 5px;
  padding: 16px;
  z-index: 1;
  left: 50%;
  transform: translateX(-50%);
  bottom: 30px;
}

<div id="snackbar">
  <p>Eleifend nec eget.</p>
</div>

left 基于框的左侧。 Translate 是基于框的宽度，因此这实际上将框的左边缘移动到元素父元素的中间，然后将其拉回框宽度的 50%。

【讨论】：