Question

我刚开始学习Bootstrap，我遇到了一个试图垂直对齐某些文本的问题。我正在从部分视图和窗口标题中显示模态窗口，尝试显示图标和标题：

这是页面内容：

 <div id="actionConfirmation" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="actionModalLabel" aria-hidden="true">
         <div class="modal-dialog">
            <div class="modal-content">
                <div id="partialViewContent"> </div>
            </div>
        </div>
    </div>

和部分视图中的代码：

<div class="modal-header">
  <div class="row">
    <div class="col-md-2">
        <i class="fa fa-exclamation-triangle fa-2x mx-auto" style="color:red" aria-hidden="true"></i>
    </div>
    <div class="col-md-10">
         <h5 class="modal-title align-middle" id="actionModalLabel">Confirm Denial</h5>
    </div>
  </div>
</div>

我试图让“确认拒绝”在行的中间对齐，但目前，它的底部用感叹号图标对齐。感觉这应该很容易但不能让它起作用。

Answer 1

想出来，需要补充：

对准项中心

于： div class =“row”

Answer 2

我刚刚发现了这个： Vertical alignment

“使用垂直对齐实用程序更改元素的对齐方式。请注意，vertical-align仅影响内联，内联块，内联表和表格单元格。”

Choose from .align-baseline, .align-top, .align-middle, .align-bottom, .align-text-bottom, and .align-text-top as needed.

<span class="align-middle">middle</span>

如何在Bootstrap 4中间对齐文本

2 个答案: