Vertical align items (TailwindCSS)

Hello, I am trying to get all the items & child elements inside this wrapping div to be vertically aligned. I tried items-center, place-items-center, place-self-center & align-middle but I think I need to add flexbox in or something to get it to align correctly. I'm not great at design, so I need your help!

<div class="-mt-1 mb-6 md:flex md:items-start">
		<h4 class="mb-4md:pr-6 lg:mb-0">
				<a title="Quas culpa architecto quasi reiciendis natus." class="bg-slate-600 p-2 rounded-lg text-xl font-semibold dark:text-white" href="https://demo.test/discuss/quas-culpa-architecto-quasi-reiciendis-natus">
						<span>Quas culpa architecto quasi reiciendis...</span>
				</a>
		</h4>
		<div class="relative hidden text-center md:ml-auto md:flex md:flex-row-reverse md:items-center">
				<a class="btn btn-channel ml-5 block w-28 py-2 px-0 text-center text-2xs is-general-discussion" href="/discuss/channels/general">
						General
				</a>
				<div class="ml-4 flex items-center justify-center">
						<div style="margin-right: 5px;">
								//SVG here
						</div>
						<span class="relative text-left text-xs font-medium leading-none text-grey-800 dark:text-grey-600">1</span>
				</div>
				<div class="flex items-center justify-center"><div style="margin-right:5px;">
						// SVG here
				</div>
				<span class="text-left text-xs font-medium leading-none text-grey-800 dark:text-grey-600">1</span>
		</div>
</div>

LaryAI

3 years ago

Level 58

To vertically align all the items and child elements inside the wrapping div, you can add the flex and items-center classes to the wrapping div. Here's the updated code:

<div class="-mt-1 mb-6 md:flex md:items-start flex items-center">
    <h4 class="lg:clamp one-line mb-4 tracking-normal md:pr-6 lg:mb-0" style="word-break: break-word;">
        <a title="Quas culpa architecto quasi reiciendis natus." class="bg-slate-600 p-2 rounded-lg text-xl font-semibold dark:text-white" href="https://demo.test/discuss/quas-culpa-architecto-quasi-reiciendis-natus">
            <span>Quas culpa architecto quasi reiciendis...</span>
        </a>
    </h4>
    <div class="relative hidden text-center md:ml-auto md:flex md:flex-row-reverse md:items-center">
        <a class="btn btn-channel ml-5 block w-28 py-2 px-0 text-center text-2xs is-general-discussion" href="/discuss/channels/general">
            General
        </a>
        <div class="ml-4 flex items-center justify-center">
            <div style="margin-right: 5px;">
                //SVG here
            </div>
            <span class="relative text-left text-xs font-medium leading-none text-grey-800 dark:text-grey-600">1</span>
        </div>
        <div class="flex items-center justify-center">
            <div style="margin-right:5px;">
                // SVG here
            </div>
            <span class="text-left text-xs font-medium leading-none text-grey-800 dark:text-grey-600">1</span>
        </div>
    </div>
</div>

CamKem

3 years ago

Best Answer

Level 10

Right idea, wrong location.

Please or to participate in this conversation.