# Center Image in Title Bar using Teleport

**URL:** <https://discourse.nodered.org/t/center-image-in-title-bar-using-teleport/90280>\
**Category:** Dashboard\
**Tags:** dashboard-2\
**Created:** [20 August 2024 00:03 UTC](https://discourse.nodered.org/t/center-image-in-title-bar-using-teleport/90280 "2024-08-20T00:03:31Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![DaveO](https://avatars.discourse-cdn.com/v4/letter/d/b487fb/32.png) [@DaveO](https://discourse.nodered.org/u/DaveO)\
**Post date:** [20 August 2024 00:03 UTC](https://discourse.nodered.org/t/center-image-in-title-bar-using-teleport/90280/1 "2024-08-20T00:03:31Z")

</div>

Following the Blog example, "Customise theming in your FF Dashboard", I am able to place a logo in the title-bar but cannot figure out how to center it and have it remain centered after page resizing.

The only way I have been able to get it to move from its left justification is to set, `margin-left: 300%;` or other % value. `margin: auto;` doesn't move it. `style="justify-content: center;"` doesn't do anything either. Here is my latest attempt that doesn't work:

```auto
<template>
    <Teleport v-if="mounted" to="#app-bar-title">
        <div class="image-container">
            <img height="32px" src="https://app.flowfuse.com/ff-logo--wordmark-caps--dark.png" alt="FlowFuse Logo">
        </div>
    </Teleport>
</template>

<script>
    export default {
  data() {
    return {
      mounted: false
    }
  },
  mounted() {
    this.mounted = true
  }
}
</script>

<style scoped>
    .image-container {
        display: flex;
        justify-content: center;
        width: 100%;
    }
</style>

```

The template node is set to UI-Scoped. Any help would be greatly appreciated.

---

<div class="post-metadata">

**Author:** ![joepavitt](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/joepavitt/32/59722_2.png) [@joepavitt](https://discourse.nodered.org/u/joepavitt)\
**Post date:** [20 August 2024 08:39 UTC](https://discourse.nodered.org/t/center-image-in-title-bar-using-teleport/90280/2 "2024-08-20T08:39:06Z")

</div>

You'll need to add some custom CSS to the `<style>` tag at the bottom:

```css
#app-bar-title {
    flex-grow: 1;
    justify-content: center;
}

```

The parent of the `app-bar` is "Flex" styled, and the above CSS will center it's content.

---

<div class="post-metadata">

**Author:** ![DaveO](https://avatars.discourse-cdn.com/v4/letter/d/b487fb/32.png) [@DaveO](https://discourse.nodered.org/u/DaveO)\
**Post date:** [20 August 2024 15:58 UTC](https://discourse.nodered.org/t/center-image-in-title-bar-using-teleport/90280/3 "2024-08-20T15:58:07Z")

</div>

Ok, thanks Joe.

---

<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:** [3 September 2024 15:58 UTC](https://discourse.nodered.org/t/center-image-in-title-bar-using-teleport/90280/4 "2024-09-03T15:58:44Z")

</div>

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