顺风css图片下的文本对齐？

Question

我想对齐图片下面的文字，这是我正在做的事情的截图。

​

在这里帮助我，我希望代码在顺风css中。

Answer 1

你是说像这样吗？

​

<script src="https://cdn.tailwindcss.com"></script>
<div class=" p-8 bg-gray-100">

    <div class="w-96 flex justify-start space-x-3 bg-gray-200 h-48   rounded-md p-8">
      <div class="space-y-4 text-center">
          <div class="w-16 h-16 bg-teal-700 rounded-full"></div>
          <h1 class=" px-2  py-0.5 bg-gray-50 border-2  border-gray-300 ">First Name</h1>
      </div>
      <div class="space-y-4 text-center">
          <div class="w-16 h-16 bg-teal-700 rounded-full"></div>
          <h1 class=" px-2   py-0.5 bg-gray-50 border-2   border-gray-300 ">SecondName</h1>
      </div>
    </div>

</div>

​

Answer 2

你只需要这么做。对我来说很管用。

          <div class="flex p-10 ">
            <div class="mx-5">
                <div class="w-20 h-20 ">
                    <img src="https://comps.gograph.com/penguin-emotional-head-vector-illustration-of-cute-arctic-bird-in-sunglasses-shows-emotion-cool-emoji-smiley-icon-print-chat-communication-penguin-in-flat-cartoon-style-on-blue-background_gg103004116.jpg" className="rounded-full"/>
                </div>
                <p class="mt-3 p-1 border-2 border-teal-200 ">Zain UI Adideen</p>
            </div>
            <div class="mx-5">
                <div class="w-20 h-20">
                    <img src="https://comps.gograph.com/penguin-emotional-head-vector-illustration-of-cute-arctic-bird-in-sunglasses-shows-emotion-cool-emoji-smiley-icon-print-chat-communication-penguin-in-flat-cartoon-style-on-blue-background_gg103004116.jpg" className="rounded-full"/>
                </div>
                <p class="mt-3 p-1 border-2 border-teal-200 ">Akira Ito</p>
            </div>
        </div>