Html 如何阻止 SVG destruct CSS 网格布局

发布于06月08日

每当我在网格布局中插入SVG时，它1)不会居中，2)会打断网格的布局.我该如何解决这个问题，以便播放图标以播放文本相同的方式显示.

以下是正在 destruct 的布局:

.body { background-color: hsl(0,0%,10%); color: white; font-size: 32px; }
.center_children { display: flex; justify-content: center; }
.timer
{
width: 12rem; height: 12rem; border-radius: 50%;
background-color: hsl(0, 50%, 50%); 
display:grid; grid-template-rows: 2fr 1fr; gap: 1.5rem;
}

<div class="body">
<br />
<div class="timer">
    <div class="center_children">
        <div class="play">Play</div>
    </div>
    <div class="center_children">1:39</div>
</div>
<br />
</div>

<br /><br />

<div class="body">
<br />
<div class="timer">
    <div class="center_children">
        <div class="play">
            <svg width="100%" height="100%" viewBox="0 0 100 100" ><polygon points="0,0 75,50 0,100" style="fill:#fff;" /></svg>
        </div>
    </div>
    <div class="center_children">1:39</div>
</div>
<br />
</div>

.body { background-color: hsl(0,0%,10%); color: white; font-size: 32px; } .timer { width: 12rem; height: 12rem; border-radius: 50%; background-color: hsl(0, 50%, 50%); display:grid; grid-template-rows: 66% 33%; grid-template-columns: 5rem; justify-content: center; }

<div class="body"> <div class="timer"> <div class="play"> <svg width="100%" height="100%" ><polygon points="0,0 75,50 0,100" style="fill:#fff;" /></svg> </div> <div>1:39</div> </div> </div>

Html 如何阻止 SVG destruct CSS 网格布局

推荐答案

Html相关问答推荐

卡片上方的文本

在浮动元素旁边垂直居中

调整一组IMG的大小以适应容器DIV

如何翻转卡片图像的背面

从网页中提取URL

从html文件中提取元素的Python BeautifulSoup

减小HTML负载中base64字符串的大小

太多的 Web 视图实例导致手机过热 Swift

如何使用多边形制作如图所示的背景

网格中的图像zoom 不正确

perl hdb 调试器：浏览器以错误的编码显示 UTF-8 源代码

如何将一个边框向下移动

当我将有序列表居中时，数字会跑到列表的另一行

如何使用CSS Select 表亲元素

如何使背景 colored颜色逐渐渐变成另一种 colored颜色？

如何更改 Quarto 中标签crossref-def-title的标题 colored颜色？

让 Iframe 覆盖整个页面

shinydashboard 标题中的位置标题

是否有一种静态方式可以根据暗模式 Select 一张或另一张图像？

所有幻灯片上的 Quarto RevealJS 标题