header alignment 顺风班

Question

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

当前代码子标题的 position 根据徽标的宽度变化并且与主 header 不对齐

<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>

如何处理？

Answer 1

您正在尝试使用flex justifyContent调整徽标和字幕，因此徽标宽度的变化会导致字幕移动。

css中有很多选项可以解决这个问题，其中之一是为您的img元素使用absolute position：

<div class="w-screen bg-red-500 bg-opacity-50 mb-5  py-5 text-white flex justify-between">
    <img src="{{ 'storage/'.$logo}}" class="absolute left-0 top-0 h-14 pl-24 pt-4" alt="">
    <h1 class="block text-3xl font-semibold text-center my-auto">
       Subtitle
    </h1>
</div> 

Answer 2

解决此问题的最简单方法是使用position: absolute属性。 使用 position 属性并删除多余的不需要的 div。 尝试以下代码，希望它能解决您的问题。

<div class="flex justify-center bg-red-200 items-center p-4 pt-10">
    <p mode="" class="pb-8 text-white">AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</p>
</div>
<div class="w-screen bg-red-500 bg-opacity-50 mb-5  py-5 text-white flex justify-center relative">
    <img src="https://placehold.it/150x150?text=logo" alt="" class="absolute left-0 top-0 h-14 pl-24 pt-4">
    <h1 class="block text-3xl font-semibold text-center my-auto">xxxxx</h1>
</div>