title: Vertical align list-group bootstrap
body: <p>How I can align bootstrap group center?</p>
  
  <p>I have code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;meta name="viewport" content="width=device-width"&gt;
    &lt;title&gt;JS Bin&lt;/title&gt;
    &lt;link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous"&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div class="container"&gt;
    &lt;div class="row justify-content-center"&gt;
      &lt;div class="col-md-8"&gt;
          &lt;div class="card"&gt;
              &lt;div class="card-header"&gt;
                Your dialogs
              &lt;/div&gt;
              &lt;ul class="list-group list-group-flush"&gt;
                &lt;li class="list-group-item"&gt;
                  &lt;div class="avatar"&gt;
                    &lt;img src="https://assets.servedby-buysellads.com/p/manage/asset/id/32054" alt=""&gt;
                  &lt;/div&gt;
                  &lt;div class="user-name"&gt;Dima&lt;/div&gt;
                  &lt;div class="message float-left"&gt;Hello?&lt;/div&gt;
                  &lt;span class="date text-mutted float-right"&gt;19:07&lt;/span&gt;
                &lt;/li&gt;
                &lt;li class="list-group-item"&gt;
                    &lt;div class="avatar"&gt;
                      &lt;img src="https://assets.servedby-buysellads.com/p/manage/asset/id/32054" alt=""&gt;
                    &lt;/div&gt;
                    &lt;div class="user-name"&gt;Jack&lt;/div&gt;
                    &lt;div class="message float-left"&gt;Nope&lt;/div&gt;
                    &lt;span class="date text-mutted float-right"&gt;20:07&lt;/span&gt;
                &lt;/li&gt;
                &lt;li class="list-group-item"&gt;
                    &lt;div class="avatar"&gt;
                      &lt;img src="https://assets.servedby-buysellads.com/p/manage/asset/id/32054" alt=""&gt;
                    &lt;/div&gt;
                    &lt;div class="user-name"&gt;Madonna&lt;/div&gt;
                    &lt;div class="message float-left"&gt;Lol?&lt;/div&gt;
                    &lt;span class="date text-mutted float-right"&gt;22:04&lt;/span&gt;
                &lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Avatar and time elements I get not on center.
  I tryied do align-items-center, but I get all items on center horizontally...
  How I can fix this?</p>
  
  <p>Example:</p>
  
  <p><a href="http://jsbin.com/raqatuyeho/1/edit" rel="nofollow noreferrer">http://jsbin.com/raqatuyeho/1/edit</a></p>