标题对齐与顺风类

Question

我有一个主标题，标志，和副标题，并希望把副标题在中心，无论标志的宽度。

使用当前代码，子标题的位置根据徽标的宽度而变化，与主标头不对齐

<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

解决此问题的最简单方法是在图像标记上使用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>

Answer 2

您正在尝试调整徽标和字幕与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>