我的 bootstrap alert 中有一个文本和一个undo撤消按钮，如下所示:
如您所见，按钮垂直居中对齐，但不在右侧.此外，右侧的闭合和左侧的文本没有垂直对齐.
我试过使用This solution，但结果是我的按钮在文本下方.此外，alert 的高度最终与段落的高度相匹配.以下是我的HTML:
<div class="container">
{% with messages = get_flashed_messages(with_categories=true) %}
{% for category, message in messages %}
<div class="alert {{ category }}" style="vertical-align: middle;">
<button type="button" class="close" data-dismiss="alert">×</button>
<p class="pull-left d-inline">{{ message }}</p>
{% if category=='alert-success' %}
<form action="/undo" method="post" class="d-inline pull-right">
<input type="submit" value="UNDO" name="undo" class="btn btn-xs btn-danger pull-right">
</form>
{% endif %}
</div>
{% endfor %}
{% endwith %}
</div>
请注意，我使用的是Flask，这是用于获取alert 的JJUA语法.我在alert 中有一个表单的原因是因为我正在使用FlASK请求处理来undo撤消对数据库的操作.