I cannot understand why my v-icon is elevated, it does not allow me to set margins or padding (or rather they have no effect) and I have the content set to baseline. Help!
<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%
}
All this looks like this
You are styling container. Try to set vuetify props to v-icon
such as mb2
or just add class to v-icon
.
I tried what was suggested here: CSS - Center align text with icon
I was able to modify the built in style provided by vuetify with v-icon
.material-icons { vertical-align: middle }
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.