css 将SVG垂直对齐到可用空间的中心

gg58donl 于 2023-02-01 发布在其他

关注(0)|答案(1)|浏览(197)

我有一个顺风卡，显示一个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-->

css

来源：https://stackoverflow.com/questions/75295317/vertically-align-svg-to-center-of-available-space

1条答案

按热度按时间

jq6vz3qz1#

您可以将 Package 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-->

赞(0）回复(0）举报 2023-02-01

我来回答

css 将SVG垂直对齐到可用空间的中心

1条答案

相关问题

热门标签

最新问答