Tailwind CSS内容居中对齐：图片与文本块的正确实现方案

To get your image, "Orange", and "fruit" text centered while keeping consistent alignment with the rest of your page elements, here are the targeted adjustments to your code:

Key Fixes Explained #

• Make the parent container of the image/text group inherit (or explicitly set) centering styles to match the rest of your page
• Adjust the flex container holding the image and text to center its contents horizontally
• Update the text alignment so "Orange" and "fruit" aren't left-aligned within their block

Modified Working Code #

<div class="bg-black overflow-auto h-screen pb-24 px-4 md:px-6">
  <div class="flex flex-col w-full p-12">
    <div class="flex flex-col w-full text-center items-center">
      <div class="btc flex flex-col items-center"> <!-- Added centering to .btc container -->
        <button class="btn btn-back mb-4">Back</button> <!-- Added margin to separate button from image/text -->
        <div class="flex gap-4 items-center justify-center"> <!-- Centered the image/text flex group -->
          <img src="https://picsum.photos/200/300" class="w-12 h-12" />
          <div class="text-center text-white"> <!-- Changed text alignment from left to center -->
            <p class="font-bold">Orange</p>
            <p class="text-grey">fruit</p>
          </div>
        </div>
      </div>
      <h1 class="text-4xl text-white mb-5">
        <span class="text-sm font-bold">Food</span>
      </h1>
      <div class="flex flex-row mt-8 gap-4">
        <button class="btn btn-primary">Send Food</button>
        <button class="btn btn-yellow">Receive Food</button>
      </div>
      <div class="flex flex-row mt-8 mb-16">
        <button class="btn btn-change flex justify-center items-center">
          <span class="w-5 h-5 bg-blue-button-bg rounded-full mr-2"></span>
          <span>Change Food</span>
        </button>
      </div>
    </div>
  </div>
</div>

Breakdown of Changes #

1. Centered .btc Container: Adding flex flex-col items-center ensures all elements inside .btc (the Back button and image/text group) align center horizontally, matching the outer wrapper's centering.
2. Image & Text Group Alignment: The justify-center on the image/text flex container makes the entire group sit centered, while items-center keeps the image and text vertically aligned.
3. Text Block Alignment: Switching text-left to text-center ensures "Orange" and "fruit" are centered within their container instead of sticking to the left edge.
4. Visual Spacing: The mb-4 on the Back button adds breathing room between it and the image/text group, improving readability without breaking alignment.

This setup keeps your header module consistent with the centered "Food" heading and button row below it.

内容的提问来源于stack exchange，提问作者Gray Singh