How to centre SVG logo

[jdhirst]

How does one centre the logo image on the screen? It seems to be left aligned by default. This is my logo.ftl:

<#macro kw>
  <div class="font-bold text-center text-2xl">
    <img src="${url.resourcesPath}/logo_light.svg" class="logo">
    <#nested>
  </div>
</#macro>

I tried adjusting my svg but it starts to look weird on different sized screens so I guess there is a better way 😅

[jdhirst]

@jarulsamy I copied your example in #79, do you have the same issue as me or is yours aligned correctly?

[jarulsamy]

My logo image centered fine, I didn't have to do anything special using the FTL you included above. Perhaps your logo dimensions are affecting this? My logo dimensions were 951 x 752.

You could also try adjusting the parent div to adjust your centering options. For example:

. . .
<div class="font-bold text-center text-2xl flex justify-center items-center">
. . .

[jdhirst]

Yep, that worked perfectly, thanks!!