title: Vuetify horizontally align content of v-list-item
body: <p>I am working on a navigation drawer with Vuetify and Vue.js.
  I am dynamically generating the list items in this drawer. </p>
  
  <p>Each list item consists of an icon, a name and a delete icon.
  So far everything is there, the only problem is, that <strong>I just can't get the 2 icons and text inside each list item to be nicely aligned vertically</strong>.</p>
  
  <p>I added an image so you can see how it looks right now.
  <a href="https://i.stack.imgur.com/j9R9h.png" rel="nofollow noreferrer">image</a></p>
  
  <p>This is the code from my component:</p>
  
  <pre><code>    &lt;v-list&gt;
        &lt;v-list-item
          class="ui-navigation"
          v-for="(block, index) in layouts2"
          v-bind:key="`layout-button-${block._uid}`"&gt;
          &lt;v-list-item-icon&gt;
            &lt;v-icon
            v-on:click="switchLayouts(block._uid)"&gt;
                mdi-home-city
            &lt;/v-icon&gt;
          &lt;/v-list-item-icon&gt;
  
          &lt;v-list-item-content&gt;
            &lt;v-list-item-title&gt; Layout {{index + 1}} &lt;/v-list-item-title&gt;
          &lt;/v-list-item-content&gt;
  
          &lt;v-list-item-content&gt;
            &lt;v-btn icon
              v-on:click="deleteLayout(block._uid)"
            &gt;
              &lt;v-icon&gt;mdi-delete-outline&lt;/v-icon&gt;
            &lt;/v-btn&gt;
          &lt;/v-list-item-content&gt;
        &lt;/v-list-item&gt;
      &lt;/v-list&gt;
  </code></pre>
  
  <p>I am glad about any help regarding this probably simply problem!</p>