标题与顺风类对齐答案

【问题标题】：header alignment with tailwind classes标题与顺风类对齐
【发布时间】：2021-11-25 14:02:53
【问题描述】：

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

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

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

如何处理？

【问题讨论】：

标签： html css tailwind-css

【解决方案1】：

解决此问题的最简单方法是在图像标签上使用position: absolute 属性。使用位置属性并删除多余的不需要的 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>

【讨论】：

【解决方案2】：

您正在尝试使用flex justifyContent 调整logo 和subtitle，这样logo 宽度的变化会导致您的字幕移动。

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

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

【讨论】：