vertically align text to the middle of my column divs

I want to vertically align the text inside my rows to the middle. you'll see I have a lg column going across my page. The text I have in the block quote is defaulting to top or upper vertical alignment. Add a single style attribute like below does not seem to be fixing the issue. Do I need to be using CSS and linking to it?

<div class='nav-wrapper container'>
        <div class='row'>
            <div class="col-lg-12" style="vertical-align:bottom">
                <center>
                    <blockquote cite="https://www.brainyquote.com/quotes/quotes/h/hippocrate133222.html">
                        <i>Healing is a matter of time, but it is sometimes a matter of opportunity.</i>
                    </blockquote>
                </center>
            </div>
        </div>

Solution

Save yourself! Don't use bootstrap if you are new to HTML! you can still get out unscathed... + the <center> tag is unsupported and deprecated. It was always horizontal, to begin with. There are about 6 ways to center something and they all have their best use-cases. You cannot use inline-block type rules like vertical align on 'block' level elements.

Here are 2 ways. I bet you just need to think about padding differently.

.padding-style {
  border: 1px solid blue;
  text-align: center;
  padding: 40px 0; /* top/bottom   left/right */
}

.flexbox-style {
  border: 1px solid red;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 140px; /* arbitrary height */
}

h1 {
  display: inline-block;
  border: 1px solid green;
}

<section class='padding-style'>
  <h1>centered thing</h1>
</section>

<section class='flexbox-style'>
  <h1>centered thing</h1>
</section>