[英]Aligning text in grid with svg
I have the following svg inside a grid我在网格中有以下 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>
Now, I would like to place some content centered in the space between each of the horizontal lines here现在,我想在此处的每条水平线之间的空间中放置一些内容
But when I try to place something for example between column 2/7 and row 2/4 the rows shrink for some reason但是当我尝试在第 2/7 列和第 2/4 行之间放置一些东西时,由于某种原因,行会缩小
That is a problem since I would like to center the content between the lines.这是一个问题,因为我想将内容放在两行之间。
Can anyone tell me why this happens and how I get around it?谁能告诉我为什么会发生这种情况以及我如何解决它?
You are missing grid-template-rows
, if this option miss, grid-template-rows
by default use auto
and all what you put inside grid cells adaptive for content.您缺少
grid-template-rows
,如果此选项未命中,默认情况下grid-template-rows
使用auto
以及您放入网格单元格中的所有内容以适应内容。
.timeline__grid {
display: grid;
grid-template-columns: repeat(6, 1fr);
grid-template-rows: repeat(10, 1fr); /* New line */
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.