css - 在固定错误警报旁边放置 x

Question

我正在自定义 Bootstrap 警报消息，因此它固定在页面顶部。唯一的问题是我似乎无法让 x 按钮位于消息的右侧。它看起来像这样(x 是顶部的小红色):

这是 HTML:

<%= content_tag(:div, msg, class: "alert alert-info") %>
<button class="close" data-dismiss="alert">×</button>

这是CSS:

.alert-info {
   position: fixed;
   display: block;
   top: 10px;
 }

.close {
   position: fixed;
   top: 0;
}

如何让 x 与警报垂直居中并在右侧？

Answer 1

http://jsfiddle.net/DLY6Y/19/

对于这种类型的警报消息，我会使用浅红色的。对于固定定位，我会添加额外的自定义类 alert-fixed。

<div class="alert alert-danger alert-dismissable alert-fixed">
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button><strong>Warning!</strong> Invalid email or password.</div>