css - 模态页脚 - Ajax 消息在模态页脚中居中

Question

我有一个带有 <label></label> 的模态页脚显示操作成功的消息。但是，属性是继承的，因此居中样式不起作用。我正在使用 Bootstrap 3.3.7

<div class="modal-footer">
    <label type="text" id="resultmessage" style="color: white; vertical-align:middle;"></label>
    <button type="button" id="updateWorksStatus" class="btn btn-success btn-sm">Update Status</button>
    <button type="button" class="btn btn-danger btn-sm" data-dismiss="modal">Close</button>
</div>

Answer 1

添加一个更具体的 CSS 选择器来覆盖 Bootstrap 样式(.modal-footer 默认设置为 text-align: right。)。

div.modal-footer {
  text-align: center;
}

此外，如果您希望它位于按钮的右侧，您可以将标签顺序切换到 .modal-footer 中的最后一个元素(为了可见性将颜色更改为灰色)。

片段:

div.modal-footer {
  text-align: center;
}

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<div class="modal-footer">
    <button type="button" id="updateWorksStatus" class="btn btn-success btn-sm">Update Status</button>
    <button type="button" class="btn btn-danger btn-sm" data-dismiss="modal">Close</button>
    <label type="text" id="resultmessage" style="color: gray; vertical-align:middle;">Database updated</label>
</div>

如果您只想将消息居中，您可以这样做(根据您的利益调整值):

.modal-footer button {
  margin-top: -48px;
}

#resultmessage {
  display: inline-block;
  width: 100%;
  text-align: center;
}

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<div class="modal-footer">
  <label type="text" id="resultmessage" style="color: gray; vertical-align:middle;">Database updated</label>
  <button type="button" id="updateWorksStatus" class="btn btn-success btn-sm">Update Status</button>
  <button type="button" class="btn btn-danger btn-sm" data-dismiss="modal">Close</button>
</div>