CSS - DOV смещаются вертикально из -за SVGS внутри ⇐ Html

[Anonymous]

У меня есть проект, над которым я работаю, который получает данные из базы данных карточной игры, которую я создаю, и отображает его пользователю. Я борюсь с отображением списка карт пользователю, потому что некоторые элементы Div не выровнены, несмотря на то, что они имеют одинаковый размер и отличаются только по содержанию. Но я не могу понять, почему. Кажется, что если я сделаю SVG меньше, проблема исчезает, но если она слишком мала, карта вместо этого сходит вниз. Я пробовал многочисленные типы дисплеев безрезультатно. SVG намного меньше, чем текст (я бы честно хотел бы, чтобы он тоже больше), и все же он, кажется, контролирует, где карта расположена вертикально. Или, может быть, чего -то мне не хватает? Я понимаю, что < /p>
Приносим извинения за грязный код. Я не уверен, чего ожидать или нужно, что касается кода здесь, поэтому я почти просто вставил здесь весь файл WIP. Не включены данные карты, которые фактически передаются, но это простые данные JSON, содержащие строки и целые числа, которые интерпретируются JavaScript. Данные. < /p>





< /code>
card.html (фрагмент, который повторяется в cardearch.html) < /p>





// Needed for Thymeleaf to be able to run this code
/* .header {
grid-area: header;
grid-template-areas:
"name rarity";
grid-template-columns: 80% 20%;
grid-template-rows: 100%;
border-bottom: 5px solid black;
gap: 0px;
padding: 0px;

> .name {
grid-area: name;
font-size: 1.5em;
border-right: 5px solid black;
display: flex;
align-items: center;
padding: 5px;
}

> .rarity {
grid-area: rarity;
justify-self: center;
height: 100%;
width: auto;
}
}

> .art {
grid-area: art;
padding: 0px;
width: 100%;
height: 100%; /* will contract just barely */
}

> .desc {
grid-area: desc;
padding: 5px;
border-top: 5px solid black;
border-bottom: 5px solid black;

ul, ol { /* remove spacing before list */
margin-block: 0;
}

svg.card-symbol {
transform: translateY(0.2em); /* FIXME temporary fix to re-align symbols inside card descriptions */
}
}

> .footer {
grid-template-areas:
"attack center health";
grid-template-columns: 33% 34% 33%;
grid-template-rows: 100%;

align-items: center;
justify-items: center;

> .attack {
grid-area: attack;
font-size: 2em;
display: flex;
align-items: center;
}

> .center {
grid-area: center;
display: flex;
align-items: center;
}

> .health {
grid-area: health;
font-size: 2em;
display: flex;
align-items:center;
}
}

svg.card-symbol {
display: inline-flex;
align-self: center;
width: 1.25em;
height: 1.25em;
}
}

.symbol-color {
fill: var(--icon-color);
}

.card-display {
padding: 5px;
display: inline-block;
}


Подробнее здесь: https://stackoverflow.com/questions/797 ... vgs-inside