如何使用 Tailwind CSS 将图像居中放置在表格中？

Question

我已经尝试了几个小时将图像置于该表的中心，但无法使其工作。该图像位于此代码的中间。我希望这是一个可行的例子。

<table class="container mx-auto mt-2">
    <thead>
    @foreach($posts as $post)
        <tr>
            <th class="p-3 font-bold uppercase bg-gray-200 text-gray-600 border border-gray-300 hidden lg:table-cell">Title</th>
            <th class="p-3 font-bold uppercase bg-gray-200 text-gray-600 border border-gray-300 hidden lg:table-cell">Image</th>
            <th class="p-3 font-bold uppercase bg-gray-200 text-gray-600 border border-gray-300 hidden lg:table-cell">Status</th>
            <th class="p-3 font-bold uppercase bg-gray-200 text-gray-600 border border-gray-300 hidden lg:table-cell">Action</th>
        </tr>
    </thead>
    <tbody>
        <tr class="bg-white lg:hover:bg-gray-100 flex lg:table-row flex-row lg:flex-row flex-wrap lg:flex-no-wrap mb-10 lg:mb-0">
            <td class="w-full lg:w-auto p-3 text-gray-800 text-center  border border-b block lg:table-cell relative lg:static">
                <span class="lg:hidden absolute top-0 left-0 bg-blue-200 px-2 py-1 text-xs font-bold uppercase">title</span>
                {{ $post->title }}
            </td>
            <td class="w-full lg:w-auto p-3 text-gray-800 border border-b text-center block lg:table-cell relative lg:static">
                <span class="lg:hidden absolute top-0 left-0 bg-blue-200 px-2 py-1 text-xs font-bold uppercase">Image</span>
                <img class=" text-center block w-8 h-8 rounded-full " src="{{ asset('storage/photos/'. $post->image ) }}" />
            </td>
            <td class="w-full lg:w-auto p-3 text-gray-800 text-center border border-b text-center block lg:table-cell relative lg:static">
                <span class="lg:hidden absolute top-0 left-0 bg-blue-200 px-2 py-1 text-xs font-bold uppercase">Status</span>
                @if($post->active )
              active
              @else
              Not active
              @endif
                
            </td>
            <td class="w-full lg:w-auto p-3 text-gray-800 text-center border border-b text-center block lg:table-cell relative lg:static">
                <span class="lg:hidden absolute top-0 left-0 bg-blue-200 px-2 py-1 text-xs font-bold uppercase">Actions</span>
                <x-jet-button wire:click="showEditPostModal({{ $post->id }})" class="bg-green-500">Edit</x-jet-button>
                <x-jet-button wire:click="deletePost({{ $post->id}})" class="bg-red-700">Delete</x-jet-button> 
            </td>
        </tr>
        @endforeach
    </tbody>
</table>

Answer 1

Tailwind 中的图像默认设置为块级margin: 0 auto，因此可以使用 CSS 属性（如或 类）居中mx-auto。基本上元素需要block（有其宽度）以这种方式居中。

一般来说，本指南对于了解居中元素的每种可能方法非常有用