將x放置在固定錯誤警報旁邊

Question

我正在自定義引導警報消息，以便它固定在頁面的頂部。唯一的問題是我似乎不能讓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>