Question

如何垂直对齐中间引导警报解除按钮？

<div class="alert alert-dismissible alert-info" role="alert">
<div class="alert-message">
Multi<br>
Line<br>
Alert
</div>
<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
</div>

小提琴：https://jsfiddle.net/b5asr9xj/4/

div alert-message就在那里，因为我正在使用jQuery.html来更新其中的内容......

Answer 1

您可以将文字换成<p></p>代码，然后在其上设置text-align: center;。

Updated fiddle

这会解决您的问题吗？

Answer 2

如果你想对齐它。在中间，您可以使用当前的html执行此类操作。

.alert-message {
   text-align: center;


button{

   display: inline-block;

}

在警报消息类中，您将文本与中心对齐，然后可以将其显示为内联（垂直）。

请参阅Updated fiddle

Answer 3

你可以这样做垂直中间。将父div添加到position：relative; 在此处查看演示链接。 https://jsfiddle.net/rhwxm3md/1/

<div class="alert alert-dismissible alert-info" role="alert">
<div class="alert-message">
Multi<br>
Line<br>
Alert
</div>
<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
</div>

CSS代码：

.alert-info {
  background-color: #d9edf7;
  border-color: #bce8f1;
  color: #31708f;
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  text-align: center;
}

如何垂直对齐中间警报关闭按钮？

3 个答案: