fix image centering

jplag · Mar 26, 2024 · a7b5c1f · a7b5c1f
1 parent 2711ec3
commit a7b5c1f
Showing 1 changed file with 7 additions and 4 deletions.
diff --git a/src/components/ReferenceLinkComponent.vue b/src/components/ReferenceLinkComponent.vue
@@ -1,19 +1,22 @@
 <template>
-  <div class="w-fit">
+  <div class="w-fit max-w-32">
     <a
     :href="referenceLink.url"
-    class="font-light flex flex-col items-center text-center text-link hover:text-link-hover visited:text-link-visited active:text-link-clicked underline"
+    class="font-light h-40 flex flex-col items-center text-center text-link hover:text-link-hover visited:text-link-visited active:text-link-clicked underline"
   >
+    <div class="flex-1 flex flex-col justify-center">
       <img 
-      class="h-32 object-cover"
+      class="max-h-32 object-cover"
       :class="{
         'rounded-full w-32': forceCircle
       }"
       :src="referenceLink.image" 
       :alt="referenceLink.alt ?? referenceLink.title" 
     />
+    </div>
+
 
-    <b >
+    <b>
       {{ referenceLink.title }}
     </b>
   </a>