title: Bootstrap 4 - Vertical Align List Item Content
body: <p>I have an app that uses Bootstrap 4. In this app, I have an inline list. I need to vertically centre the content of each list item. At this time, the content of each item is vertically centred on the top as shown in this <a href="https://www.bootply.com/gxhpfIyeiw" rel="nofollow noreferrer">Bootply</a>. The relevant code looks like this:</p>
  
  <pre><code>&lt;ul class="list-inline" style="text-align: center;"&gt;
    &lt;li class="list-inline-item"&gt;
      &lt;div class="list-option"&gt;Football&lt;/div&gt;
    &lt;/li&gt;
    &lt;li class="list-inline-item"&gt;
      &lt;div class="list-option"&gt;Baseball&lt;/div&gt;
    &lt;/li&gt;
    &lt;li class="list-inline-item"&gt;
      &lt;div class="list-option"&gt;Basketball&lt;/div&gt;
    &lt;/li&gt;
    &lt;li class="list-inline-item"&gt;
      &lt;div class="list-option"&gt;Golf&lt;/div&gt;
    &lt;/li&gt;
    &lt;li class="list-inline-item"&gt;
      &lt;div class="list-option"&gt;Hockey&lt;/div&gt;
    &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>I posted a similar SO question <a href="https://stackoverflow.com/questions/45881450/bootstrap-4-vertically-centering-list-items">here</a>. However, in that question, I wasn't specific enough. The answerers did answer the question though. For that reason, I wanted to ensure they got credit and opened a new question. This question is really about vertically centring the <em>content</em> within each item. How do I do this in Bootstrap 4?</p>