html - 将网格中的文本与 svg 对齐
问题描述
我在网格中有以下 svg
.timeline__grid {
display: grid;
grid-template-columns: repeat(6, 1fr);
}
svg {
width: 100%;
height: auto;
grid-column: 1/-1;
grid-row: 1/11;
}
<div class="timeline__grid">
<svg width="415" height="1200" viewBox="0 0 415 1200" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M395 0V0C395 66.2742 341.274 120 275 120H140C73.7258 120 20 173.726 20 240V240" stroke="black" stroke-width="4"/>
<path d="M395 480V480C395 413.726 341.274 360 275 360H140C73.7258 360 20 306.274 20 240V240" stroke="black" stroke-width="4"/>
<path d="M395 480V480C395 546.274 341.274 600 275 600H140C73.7258 600 20 653.726 20 720V720" stroke="black" stroke-width="4"/>
<path d="M20 720V720C20 786.274 73.7258 840 140 840H275C341.274 840 395 893.726 395 960V960" stroke="black" stroke-width="4"/>
<path d="M395 960V960C395 1026.27 341.274 1080 275 1080H140C73.7258 1080 20 1133.73 20 1200V1200" stroke="black" stroke-width="4"/>
</svg>
<!-- <h2 style="font-size: 2rem; color:white; grid-column: 3/7; grid-row:2/4">test</h2> -->
</div>
现在,我想在每条水平线之间的空间中放置一些内容
但是当我尝试在第 2/7 列和第 2/4 行之间放置一些东西时,由于某种原因,行会缩小
这是一个问题,因为我想将内容放在两行之间。
谁能告诉我为什么会发生这种情况以及我如何解决它?
解决方案
推荐阅读
- php - 为 Tests\Feature\BTest::testB 指定的数据提供程序无效。PHPUnit\Util\Exception:方法 dataProviderForB 不存在
- javascript - Vuex store 在不同模块中导入时创建一个新实例
- c# - “无法创建摄像机”使用 C# 的 OpenCvSharp
- javascript - 调整窗口大小时重置滑块 JavaScript(不是 jQuery)
- python - 如何连接字典的所有键和值并以字符串的形式返回?
- java - 在 Java 中的多线程套接字编程方面需要帮助
- javascript - 在javascript中将三元运算分解为if,else
- javascript - 如何修复错误:对象作为 React 子对象无效(找到:[object Promise])
- javascript - 为 HTML 表单生成安全随机数
- php - woocmmerce 函数类的选择选项上的 foreach 数组存在问题