Center a mdi-circle in a1 by 3 field

Dashboard
1

how can I center horizontaly and verticaly a mdi circle in 1 by 3 field.
code below does not work.

<template>
    <div class="my-class">
        <div :style="{color: msg.color || 'black', margin: 'auto' }">
            <i :class="['mdi', msg.icon || 'mdi-help']" aria-hidden="true"></i>
        </div>
    </div>
</template>

<script>
    export default {
  data() {
    return {
    };
  }
}
</script>

<style>
    .my-class {
        display: flex;
        justify-content: center;
    }
</style>

this is how it looks on dashboard 1

image
image1455×664 26 KB

2

It is centered. But here is a danger in your class naming strategy. If you use "my-class" anywhere else - the last one wins. (And you most probably don't know which will be the last one.)
Use names for classes you can identify to avoid confusion.

3

many thanks! It works.
But how can I change the size of the circle - like size{2}

4

For icons (mostly) the font-size is the property to change.

5

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.