-1

I'm just starting to learn Bootstrap and I'm running into a problem trying to vertically align some text. I'm displaying a modal window from a partial view and in the header of the window, trying to display an icon and a title:

here's the page content:

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

and the code in the partial view: 

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

I'm trying to get "Confirm Denial" to align in the middle of the row but at present, it's bottom justified with the exclamation icon. Feel like this should be easy but can't get it to work.

TrevorGoodchild
  • 978
  • 2
  • 23
  • 49
  • 2
    Seems to be vertically aligned as expected: https://www.codeply.com/go/7kbieJ1j7b – Carol Skelly May 08 '18 at 16:23
  • yes, can confirm yours is exactly what I want. I neglected to mention i'm using partial views, updated the question in case that makes a difference. – TrevorGoodchild May 08 '18 at 16:45
  • We can't help if you can't repro the issue here. Perhaps you can inspect the rendered HTML and compare the differences in the working modal. – Carol Skelly May 08 '18 at 17:18
  • I got it working, I needed to add align-items-center to the row div. It's weird, I had it exactly like yours Zim. Thanks for your help. – TrevorGoodchild May 08 '18 at 17:33

2 Answers2

1

Figured it out, needed to add:

align-items-center

to: div class="row"

TrevorGoodchild
  • 978
  • 2
  • 23
  • 49
-1

I just found this: Vertical alignment

"Change the alignment of elements with the vertical-alignment utilities. Please note that vertical-align only affects inline, inline-block, inline-table, and table cell elements."

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>

Robin
  • 66
  • 1
  • 1
  • 9
  • 1
    He knows about this, `
    Confirm Denial
    `. Please answer specific solutions. (Even though it seems like his text is actually vertically aligned already)     – Paul May 08 '18 at 16:27