我有一个主标题、徽标和副标题，无论徽标的宽度如何，我都希望将副标题放在中心。

在当前代码中，子标题的位置根据徽标的宽度而改变，并且不与主标题对齐

<div class="flex justify-between items-center p-4 pt-10">
        <div class="w-40"></div>        
        <p mode="" class="pb-8 w-72 flex justify-center text-white">AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</p>
        <a href="{{url('/')}}" class="text-green-500 text-lg underline font-bold text-right w-32 mr-10 pb-8"></a>
        </div>
        <div class="w-screen bg-red-500 bg-opacity-50 mb-5  py-5 text-white flex justify-between">
            <img src="{{ 'storage/'.$logo}}" class="h-14 pl-24" alt="">
            <h1 class="block text-3xl font-semibold text-center my-auto">xxxxx</h1>
            <div class="w-72"></div>
</div>

如何处理？

顺晟科技：

您正在尝试调整徽标和副标题，以便徽标宽度的更改将导致副标题的移动。

有许多方法可以解决此问题，其中之一是为元素使用position:

<div class="flex justify-between items-center p-4 pt-10">
        <div class="w-40"></div>        
        <p mode="" class="pb-8 w-72 flex justify-center text-white">AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</p>
        <a href="{{url('/')}}" class="text-green-500 text-lg underline font-bold text-right w-32 mr-10 pb-8"></a>
        </div>
        <div class="w-screen bg-red-500 bg-opacity-50 mb-5  py-5 text-white flex justify-between">
            <img src="{{ 'storage/'.$logo}}" class="h-14 pl-24" alt="">
            <h1 class="block text-3xl font-semibold text-center my-auto">xxxxx</h1>
            <div class="w-72"></div>
</div>

解决此问题的最简单方法是在图像标记上使用属性。使用position属性并移除额外不需要的div。尝试下面的代码，我希望它能解决您的问题。

<div class="flex justify-between items-center p-4 pt-10">
        <div class="w-40"></div>        
        <p mode="" class="pb-8 w-72 flex justify-center text-white">AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</p>
        <a href="{{url('/')}}" class="text-green-500 text-lg underline font-bold text-right w-32 mr-10 pb-8"></a>
        </div>
        <div class="w-screen bg-red-500 bg-opacity-50 mb-5  py-5 text-white flex justify-between">
            <img src="{{ 'storage/'.$logo}}" class="h-14 pl-24" alt="">
            <h1 class="block text-3xl font-semibold text-center my-auto">xxxxx</h1>
            <div class="w-72"></div>
</div>