vuetify v-icon问题

Question

我不明白为什么我的v图标被提升了，它不允许我设置边距或填充(或者更确切地说，它们没有效果)，并且我将内容设置为基线。帮助!

<v-card-text>
          <v-layout justify-start>
            <div class="address">{{bla bla bla}}</div>
            <v-icon small color="purple">verified_user</v-icon>
            <div class="right-icon loc-info">
              <v-icon>map</v-icon>
              <div>Map</div></div>
            <div class="loc-info"><v-icon>directions</v-icon>
            <div>Directions</div>
            </div>
            <div class="loc-info"><v-icon>share</v-icon>
            <div>Share</div>
            </div>
            <v-spacer></v-spacer>
            <v-icon color="grey">close</v-icon>
          </v-layout>
        </v-card-text>
    ....
    <style>
    .loc-info{
  display: flex;
  align-items: baseline;
}
.right-icon{
  margin-left: 20%
}

所有这些看起来都像this

​

Answer 1

您正在设置容器的样式。尝试将vuetify props设置为v-icon，例如mb2，或者只向v-icon添加类。

Answer 2

我尝试了这里建议的方法：CSS - Center align text with icon

我能够用v-icon修改vuetify提供的内置样式

.material-icons { vertical-align: middle }