Wie vertikale Listenelemente mit Symbolen versehen werden

Question

Kann mir jemand helfen zu verstehen, wie kann ich das vertikal ausrichten? JSFIDDLE

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/MaterialDesign-Webfont/2.0.46/css/materialdesignicons.css" 
></link> 

<aside class="menu column is-2 full-height"> 
    <ul class="menu-list"> 
    <li> 
     <a href="#" class=""> 
      <i class="mdi mdi-file-document-box mdi-48px"></i> 
      <span>Document</span> 
     </a> 
    </li> 
    <li> 
     <a href="#" class=""> 
      <i class="mdi mdi-file-document-box mdi-48px"></i> 
      <span>Document</span> 
     </a> 
    </li> 
</ul> 
</aside> 

Ich brauche neben ihm Symbol und Text ausrichten? gibt es einige weitere CSS da ich bulma.io und etwas Gewohnheit bin mit aber nicht so relevant denke ich

Sie die CSS löschen und neu erstellen, wenn es nicht ok ist

Answer 1

Je nach Ihren Bedürfnissen stehen Ihnen einige Optionen zur Verfügung.

Updated jsFiddle

Verwendung display: inline-block; auf dem Element (n), die nebeneinander und müssen ausgerichtet werden. Dann können Sie vertical-align: [top|middle|baseline] verwenden, wie für jedes Element benötigt

i, span { 
    display: inline-block; 
    vertical-align: middle; 
} 

Wenn diese Ausrichtung nicht für Sie arbeiten, dann sollten Sie die vertical-align-top, auf sie zu erhalten positioniert, wie Sie wollen, und dann können Sie line-height verwenden zur Feinabstimmung der vertikalen Positionierung jedes Elements. Beispiel:

i, span { 
    display: inline-block; 
    vertical-align: top; 
} 

i { 
    line-height: 39px; 
} 

span { 
    line-height: 39px; 
} 

Answer 2

Sie display: flex hinzufügen und align-items: center Regeln li a

fiddle

aside { 
 
    background-color: #0067ad; 
 
    height: 100%; 
 
} 
 

 
li a { 
 
    display: flex; 
 
    align-items: center; 
 
} 
 

 
.menu-list { 
 
    list-style: none; 
 
} 
 

 
i { 
 
    color: white; 
 
} 
 

 
a:hover, 
 
a:active, 
 
.router-link-active { 
 
    background-color: black; 
 
} 
 

 
span { 
 
    color: white; 
 
} 
 

 

 
} 
 
a { 
 
    color: white 
 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/MaterialDesign-Webfont/2.0.46/css/materialdesignicons.css" rel="stylesheet"/> 
 

 

 
<aside class="menu column is-2 full-height"> 
 
    <ul class="menu-list"> 
 
    <li> 
 
     <a href="#" class=""> 
 
     <i class="mdi mdi-file-document-box mdi-48px"></i> 
 
     <span>Document</span> 
 
     </a> 
 
    </li> 
 
    <li> 
 
     <a href="#" class=""> 
 
     <i class="mdi mdi-file-document-box mdi-48px"></i> 
 
     <span>Document</span> 
 
     </a> 
 
    </li> 
 
    </ul> 
 
</aside>