header 顺风对齐类

Question

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

在当前代码中，副标题的位置根据徽标的宽度而变化，并且与主标题不对齐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 位置：

<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 属性。使用位置属性并删除多余的 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>

header 顺风对齐类

header alignment with tailwind classes

html

css

tailwind-css

header 顺风对齐 类

header alignment with tailwind classes

html

css

tailwind-css

header 顺风对齐类