アイコンでリストアイテムを縦に並べる方法

Question

これを縦に並べるにはどうすればいいですか？ 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> 

私の隣にアイコンとテキストを揃える必要がありますか？私はbulma.ioと何かのカスタムを使用しますが、私はあなたがそのCSSを削除し、新しいものを作成することができます

それはOK

Answer 1

必要に応じて、いくつかのオプションがあります。

Updated jsFiddle

使用display: inline-block;互いに隣接しており、整列される必要がある要素（単数または複数）に。各要素のために、必要に応じてそのアライメントはあなたのために動作しない場合、あなたは彼らがあなたが好きどのように位置付け得るために、vertical-alignからtopを設定する必要があり

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

その後、あなたはvertical-align: [top|middle|baseline]を使用することができ、その後、あなたはline-heightを使用することができます各要素の垂直方向の位置を微調整します。例：

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

i { 
    line-height: 39px; 
} 

span { 
    line-height: 39px; 
} 

Answer 2

でない場合は、display: flexを追加することができると思うので、関連していないよので、 いくつかのより多くのCSSがありますし、 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>

へ align-items: centerルール