Align title text in collapse in the middle

[bogdan]

I am trying to align a text in collapse in the center, but chevron arrow takes some space and title is set a little to the right from the center. Is it possible to make arrow have a absolute position and text to be exactly in the center?

https://play.tailwindcss.com/L2yalFmJcY

<div tabindex="0" class="collapse-arrow collapse m-5 border border-base-300 bg-base-100 text-center max-w-128">
  <div class="collapse-title font-semibold bg-red-400">
    Middle
    </div>
  <div class="collapse-content text-sm">Click the "Sign Up" button in the top right corner and follow the registration process.</div>
</div>

I tried pl-X, but it only works if the title is not dynamic (like comming from backend data).

[LazycoderAayu]

Hi Bogdan!

I see exactly what's happening. Because DaisyUI uses a Grid/Flex layout for the collapse-arrow, that chevron icon actually occupies "physical" space in the row. This pushes your title text to the left, making your text-center look off-balance.
If you want the text to be in the mathematical center regardless of the arrow, you have to "lift" the arrow out of the layout flow using absolute positioning.

inshort: To get a perfect center, you need to "lift" the arrow out of the layout flow so the text can ignore it.

The Fix

You can wrap this logic in a single CSS block so it handles your dynamic backend text perfectly without needing manual padding.

Add this to your CSS:

/* Custom class to force true centering */
.collapse-center-title {
  position: relative;
}

.collapse-center-title .collapse-title {
  display: flex;
  justify-content: center; 
  align-items: center;
}

/* Make the arrow "float" so it doesn't push the text */
.collapse-center-title.collapse-arrow .collapse-title::after {
  position: absolute;
  right: 1.5rem; /* Keep it on the edge */
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
}

Then update your HTML like this:

<div tabindex="0" class="collapse collapse-arrow border border-base-300 bg-base-100 max-w-md m-5">
  <div class="collapse-title font-semibold bg-red-400">
    Middle
  </div>
  <div class="collapse-content text-sm">
    <p class="mt-4">
      Click the "Sign Up" button in the top right corner and follow the registration process.
    </p>
  </div>
</div>

Why this is better for your POV:

• Dynamic Text: Whether your backend sends "Hi" or "Welcome to the Dashboard," the text will always stay dead-center because the arrow is essentially "floating" on top of the layout instead of standing next to the text.
• No Manual Spacing: You won't have to guess pl-X values anymore.

Hope this clears up that alignment for you!