[Vuejs]-Tailwind Modal Image Alignment

by

0👍

Try this –

<template>
  <div id="app">
    <div class="flex items-center">
   <vue-tailwind-modal class="flex justify-center items-center bg-grey-lighter border-b-2 border-grey ml-2 hover:bg-grey-lightest text-grey-darkest font-bold py-4 px-6 rounded " :showing="modal" @close="modal = false">
    <div class="flex flex-col items-center">
      <img class="h-32 w-32 object-center" src="https://images.pexels.com/photos/5658572/pexels-photo-5658572.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" />
      <div v-for="(item,i) in links" :key="i" class="p-8">
        <p>{{ item.name }}</p>
        <p>{{ item.link }}</p>
      </div>
    </div>
  </vue-tailwind-modal>

      <button @click="toggleModal">Toggle</button>
    </div>
  </div>
</template>

Adding the display flex to an encompassing div , then aligning it so that everything is in the center.

Leave a comment