將 SVG 垂直對齊到可用空間的中心

Question

我有一張 Tailwind 卡，它在大屏幕的左側顯示一個 SVG 圖標，在中等大小的屏幕和更小的屏幕上顯示在頂部。

我可以沿 x 軸對齊圖標。 但是，在 y 軸上我無法正確處理。

我使用了一些填充類，它們可以完成一些工作。 因為我可以將圖標從頂部移開，但這也會在圖標和下面的文本之間增加額外的空間。

是否有一種明顯的方法可以使圖標沿着可用空間的 x 軸和 y 軸位於中間/中心？

你可以看看這個片段，看看我到現在為止有多遠。

 <link href="https://www.windesheim.nl/assets/css/main.css" rel="stylesheet"/> <link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/1.9.6/tailwind.css" rel="stylesheet"/> <link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/1.9.6/tailwind.min.css" rel="stylesheet"/> <:--start card image--> <div class="max-w-md mx-auto bg-white shadow-md overflow-hidden md:max-w-2xl mt-6 mb-6"> <div class="md:flex"> <div class="md:flex-shrink-0"> <span class="icon fill-current inline-block text-brand-1-darker icon--lightbulb h-48 mx-auto drop-shadow3 w-full object-cover md:h-full md:w-48"><svg width="50%" height="50%" xmlns="http.//www.w3.org/2000/svg" viewBox="0 0 352 512" aria-hidden="true" focusable="false"> <path d="M96.06 454.35c.01 6.29 1.87 12.45 5.36 17.69l17.09 25.69a31.99 31.99 0 0026.64 14.28h61.71a31.99 31.99 0 0026.64-14.28l17.09-25.69a31.989 31.989 0 005.36-17.69l.04-38.35H96.01l.05 38.35zM0 176c0 44.37 16.45 84.85 43.56 115.78 16.52 18.85 42.36 58.23 52.21 91.45.04.26.07.52.11.78h160.24c.04-.26.07-.51.11-.78 9.85-33.22 35.69-72.6 52.21-91.45C335.55 260.85 352 220.37 352 176 352 78.61 272.91-.3 175.45 0 73.44.31 0 82.97 0 176zm176-80c-44.11 0-80 35.89-80 80 0 8.84-7.16 16-16 16s-16-7.16-16-16c0-61.76 50.24-112 112-112 8.84 0 16 7.16 16 16s-7,16 16-16 16z"> </path> </svg></span> </div> <div class="p-8"> <div class="uppercase tracking-wide text-sm text-indigo-500 font-semibold">Title</div> <p class="block mt-1 text-lg leading-tight font-medium text-black">Lead</p> <p class="mt-2 text-gray-500">Lorem ipsum dolor sit amet. consectetur adipiscing elit.</p> </div> </div> </div> <!--end card image-->

Answer 1

您可以將包裹 SVG 的span更改為 flex，然后使用items-center 。

 <link href="https://www.windesheim.nl/assets/css/main.css" rel="stylesheet" /> <link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/1.9.6/tailwind.css" rel="stylesheet" /> <link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/1.9.6/tailwind.min.css" rel="stylesheet" /> <:--start card image--> <div class="mx-auto mt-6 mb-6 max-w-md overflow-hidden bg-white shadow-md md:max-w-2xl"> <div class="md:flex"> <div class="md:flex-shrink-0"> <span class="icon text-brand-1-darker icon--lightbulb drop-shadow3 mx-auto flex h-48 w-full items-center fill-current object-cover md:h-full md:w-48" ><svg class="" width="50%" height="50%" xmlns="http.//www.w3.org/2000/svg" viewBox="0 0 352 512" aria-hidden="true" focusable="false"> <path d="M96.06 454.35c.01 6.29 1.87 12.45 5.36 17.69l17.09 25.69a31.99 31.99 0 0026.64 14.28h61.71a31.99 31.99 0 0026.64-14.28l17.09-25.69a31.989 31.989 0 005.36-17.69l.04-38.35H96.01l.05 38.35zM0 176c0 44.37 16.45 84.85 43.56 115.78 16.52 18.85 42.36 58.23 52.21 91.45.04.26.07.52.11.78h160.24c.04-.26.07-.51.11-.78 9.85-33.22 35.69-72.6 52.21-91.45C335.55 260.85 352 220.37 352 176 352 78.61 272.91-.3 175.45 0 73.44.31 0 82.97 0 176zm176-80c-44.11 0-80 35.89-80 80 0 8.84-7.16 16-16 16s-16-7.16-16-16c0-61.76 50.24-112 112-112 8.84 0 16 7.16 16 16s-7,16 16-16 16z"></path></svg ></span> </div> <div class="p-8"> <div class="text-sm font-semibold uppercase tracking-wide text-indigo-500">Title</div> <p class="mt-1 block text-lg font-medium leading-tight text-black">Lead</p> <p class="mt-2 text-gray-500">Lorem ipsum dolor sit amet. consectetur adipiscing elit.</p> </div> </div> </div> <!--end card image-->