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

您可以删除该css，如果不正确则创建新的

Answer 1

您可以将display: flex和align-items: center规则添加到li a

fiddle

＆＃13;

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
}

＆＃13;

<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>

＆＃13;

Answer 2

根据您的需要，您可以选择一些选项。

Updated jsFiddle

在彼此相邻且需要对齐的元素上使用display: inline-block;。然后，您可以根据需要使用vertical-align: [top|middle|baseline]每个元素

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

如果该对齐不适合您，那么您应该将vertical-align设置为top，以便按照您喜欢的方式定位，然后您可以使用line-height微调每个元素的垂直位置。例如：

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

i {
    line-height: 39px;
}

span {
    line-height: 39px;
}

如何使用图标垂直列出所有列表项

2 个答案: