# Center a mdi-circle in a1 by 3 field

**URL:** https://discourse.nodered.org/t/center-a-mdi-circle-in-a1-by-3-field/91258
**Category:** Dashboard
**Created:** [25 September 2024 13:43 UTC](https://discourse.nodered.org/t/center-a-mdi-circle-in-a1-by-3-field/91258 "2024-09-25T13:43:25Z")
**Posts on this page:** 5
**Page:** 1

<div class="post-metadata">

### Author: ![juntiedt](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/juntiedt/32/58357_2.png) [@juntiedt](https://discourse.nodered.org/u/juntiedt)
#### Post date: [25 September 2024 13:43 UTC](https://discourse.nodered.org/t/center-a-mdi-circle-in-a1-by-3-field/91258/1 "2024-09-25T13:43:25Z")

</div>

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

```auto
<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](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/d/0/d0fa27308eab3431e4e755becbb3dd093ef0fd71.png)

---

<div class="post-metadata">

### Author: ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)
#### Post date: [25 September 2024 14:06 UTC](https://discourse.nodered.org/t/center-a-mdi-circle-in-a1-by-3-field/91258/2 "2024-09-25T14:06:29Z")

</div>

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.

---

<div class="post-metadata">

### Author: ![juntiedt](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/juntiedt/32/58357_2.png) [@juntiedt](https://discourse.nodered.org/u/juntiedt)
#### Post date: [25 September 2024 14:35 UTC](https://discourse.nodered.org/t/center-a-mdi-circle-in-a1-by-3-field/91258/3 "2024-09-25T14:35:21Z")

</div>

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

---

<div class="post-metadata">

### Author: ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)
#### Post date: [25 September 2024 15:51 UTC](https://discourse.nodered.org/t/center-a-mdi-circle-in-a1-by-3-field/91258/4 "2024-09-25T15:51:38Z")

</div>

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

---

<div class="post-metadata">

### Author: ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)
#### Post date: [25 October 2024 15:52 UTC](https://discourse.nodered.org/t/center-a-mdi-circle-in-a1-by-3-field/91258/5 "2024-10-25T15:52:34Z")

</div>

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