Tailwind CSS Flex布局justify属性失效问题求助

问题情况 #

使用Tailwind CSS的flex布局时，justify-center属性在md及以上屏幕尺寸下无法生效。已尝试刷新页面、清除浏览器缓存，测试justify、justify-items、align、align-items等各类flex相关属性，问题仍未解决。

相关代码 #

<main class="flex-grow text-slate-900 font-kadwa bg-stone-200">
    <p class="mx-5 my-5 text-4xl text-center md:text-6xl md:text-left">Top News</p>
    <div class="md:flex md:justify-center">
        <img src="default.jpg" class="shrink rounded-xl w-screen h-30 md:w-full md:h-full md:mx-5">
        <div class="">
            <p class="text-2xl text-center my-3 md:text-left md:mx-5 md:text-4xl md:mb-10 2xl:text-6xl">LOREM IPSUM</p>
            <p class="text-wrap mx-5 text-sm text-center md:text-left md:text-xl 2xl:text-3xl">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            <a class="mx-5">Read more...</a>
        </div>
    </div>
</main>

效果对比 #

• 实际效果：md及以上屏幕下，flex容器内的图片和文本区块靠左排列，未实现水平居中，图片占满容器宽度导致布局失衡。
• 预期效果：md及以上屏幕下，flex容器内的图片与文本区块整体在页面水平居中，两者合理分配空间，布局紧凑美观。

解决方法 #

1. 限制flex容器的最大宽度：给flex容器添加md:max-w-6xl（可根据设计需求调整为max-w-5xl等），让容器有明确的宽度边界，这样md:justify-center才能生效，让容器内容在页面居中：

   <div class="md:flex md:justify-center md:max-w-6xl md:mx-auto">
   

2. 调整图片宽度：将图片的md:w-full改为md:flex-1或md:w-1/2，避免图片占满整个flex容器，给文本区块留出空间，同时让两者在flex布局中合理分配宽度：

   <img src="default.jpg" class="shrink rounded-xl w-screen h-[7.5rem] md:flex-1 md:mx-5">
   

   （注：原代码中的h-30不是Tailwind默认类，替换为h-[7.5rem]，或在tailwind.config.js中自定义h-30的配置）
3. 可选：添加间距与对齐优化：给文本区块也添加md:flex-1，确保两者平分空间，同时可添加md:items-center让内容垂直居中：

   <div class="md:flex md:justify-center md:max-w-6xl md:mx-auto md:items-center">
       <img src="default.jpg" class="shrink rounded-xl w-screen h-[7.5rem] md:flex-1 md:mx-5">
       <div class="md:flex-1">
           <!-- 文本内容 -->
       </div>
   </div>
   

内容的提问来源于stack exchange，提问作者Alireza Arifi