search

lukin / keywind

Keywind is a component-based Keycloak Login Theme built with Tailwind CSS
Apache License 2.0
737 stars 261 forks source link

How to centre SVG logo #93

Closed jdhirst closed 1 month ago

jdhirst commented 1 month ago

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 commented 1 month ago

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

jarulsamy commented 1 month ago

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 commented 1 month ago

Yep, that worked perfectly, thanks!!