Css 将x放置在修复错误警报旁边

我正在自定义引导警报消息，使其固定在页面顶部。唯一的问题是我似乎无法使

x

按钮位于消息的右侧。它看起来像这样（顶部的小红色是

x

）：

以下是HTML：

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

如何使

x

与警报垂直居中并向右？

对于这种类型的警报消息，我将使用浅红色消息。对于固定位置，我将添加额外的自定义类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>

&时代警告无效的电子邮件或密码。

<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>