顺风模态图像 Alignment

Question

我正在尝试在 Vue 中使用 Tailwind 构建模式，但是在获取模式中的元素以按照我想要的方式对齐时遇到问题。

我已经尝试剥离某些 Tailwind 类并尝试使用网格、flex 和其他此类定位选项，但图像仍然与左侧对齐。

理想情况下，我希望图像和它下面的一些文本居中对齐，然后是下面两个带有这些链接的框。 有任何想法吗？

我的代码如下所示：

<template>
  <div id="app">
    <div class="flex items-center">
      <vue-tailwind-modal
        class="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"
      >
        <img class="h-32 w-32 object-center" src="./assets/discord.png" />
        <div
          v-for="item in links"
          :key="item.link"
          class="relative p-8 bg-white w-full max-w-md m-auto flex-col"
        >
          <div>{{ item.name }}</div>
          <div>{{ item.link }}</div>
        </div>
      </vue-tailwind-modal>
      <button @click="toggleModal">Toggle</button>
    </div>
  </div>
</template>

<script>
//import PopUp from "./components/PopUp.vue";
import VueTailwindModal from "vue-tailwind-modal";

export default {
  name: "App",
  components: {
    VueTailwindModal,
    //PopUp,
  },
  data: () => ({
    modal: true,
    links: [
      {
        name: "Google",
        link: "google.com",
      },
      {
        name: "Bing",
        link: "bing.com",
      },
    ],
  }),
  methods: {
    toggleModal() {
      this.modal = !this.modal;
    },
  },
};
</script>

<style></style>

Answer 1

尝试这个 -

<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>

将 display flex 添加到包含的div中，然后将其对齐以使所有内容都位于中心。