Can anyone help me center 3 spans in a list within a table?
Currently, the alignment looks like this: spans not properly centered. However, I want it to appear like this: span properly centered.
ul {
text-align: center;
list-style-position: inside;
list-style-type: none
}
li {
display: grid;
grid-template-columns: 1fr 2.5fr 1fr;
gap: NaNpx 2%;
grid-template-areas:
"subject teacher room";
justify-content: center;
align-content: center;
justify-items: center;
align-items: center;
}
body {
text-align: center;
}
.ttps-span-center {
font-weight: normal;
grid-area: teacher;
}
.ttps-span-right {
font-weight: bold;
grid-area: room;
}
.ttps-span-left {
font-weight: bold;
grid-area: subject;
}Here is the link to my codepen for reference:
Appreciate any assistance with this issue.