How to center-align the arrow

Question:
On my website, in the Research tab, the arrow pointing to the right is not center aligned. How do I fix this?
Repl link: https://replit.com/@element1010/Cosmic-Adventure

<td class="material-symbols-outlined" data-type="connection-horizontal" data-column="1.5" data-connection="left-right">arrow_forward</td>
td[data-type="connection-horizontal"] {
  width: 30px;
  height: 100px;
}

Your table need to expand its width, first of all. Or you can just use absolute positioning to do it.

1 Like

Sorry if I was unclear. I meant center vertically.

Okay, I fixed the issue.
Please replace <td class="material-symbols-outlined" data-type="connection-horizontal" data-column="1.5" data-connection="left-right">arrow_forward</td> with <td class="material-symbols-outlined center">arrow_forward</td>, and then add to the style.css:

.center {
  margin-top:40px;
}
2 Likes

Thank you. I did it a little differently since I needed to keep the attributes for some JavaScript.

1 Like

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.