How to centre SVG icon on the Y and X axis?

Hi,

I am wondering if anyone could tell me how to centre an svg icon in a code block on both axis? I have attached some screenshots for reference. I am using the icon as an anchor link to the top of the page.

I am currently using the following code:

<a href="#">
  <center>
<svg xmlns="http://www.w3.org/2000/svg" width=50% height=50% viewBox="0 0 384 512"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path fill="#ffffff" d="M214.6 9.4c-12.5-12.5-32.8-12.5-45.3 0l-128 128c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L160 109.3 160 480c0 17.7 14.3 32 32 32s32-14.3 32-32l0-370.7 73.4 73.4c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3l-128-128z"/>
</svg>
  </center>
</a>

Any help would be greatly appreciated. Thanks!

Hi @atmos, do you mean vertical alignment?

14 minutes ago, Spark-Plugin said:

Hi @atmos, do you mean vertical alignment?

Hi yes both vertical and horizontal alignment if possible.

Hi again, @atmos, I pasted your code, and it looks great so far! The only adjustment I had to make for the vertical alignment of the arrow was to use the alignment option in the settings. Please see the screenshot below:

6 minutes ago, Spark-Plugin said:

Hi again, @atmos, I pasted your code, and it looks great so far! The only adjustment I had to make for the vertical alignment of the arrow was to use the alignment option in the settings. Please see the screenshot below:

Hi, even with using that alignment feature the icon is still slightly higher than central for the vertical axis. I’d like it to be positioned slightly lower so it is in the centre of the two blocks beneath it if possible. Might be a manual Y axis adjustment due to the icon.

I’d like to to be more like this:

@atmos, I understand, then give this code a try:

You can play around with the margin:  margin: -3px 0;, for example 10px, -20px:

<a href="#" class="icon-link">
    <svg xmlns="http://www.w3.org/2000/svg" width="50%" height="50%" viewBox="0 0 384 512">
        <!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.-->
        <path fill="#ffffff" d="M214.6 9.4c-12.5-12.5-32.8-12.5-45.3 0l-128 128c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L160 109.3 160 480c0 17.7 14.3 32 32 32s32-14.3 32-32l0-370.7 73.4 73.4c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3l-128-128z"/>
    </svg>
</a>

<style>
.icon-link {
    display: block;          /* Use block to allow margin to work */
    margin: -3px 0;        /* Add top and bottom margins (adjust as needed) */
    text-align: center;     /* Center the text if needed */
}
</style>

Let me know if this works.

1 hour ago, Spark-Plugin said:

@atmos, I understand, then give this code a try:

You can play around with the margin:  margin: -3px 0;, for example 10px, -20px:

<a href="#" class="icon-link">
    <svg xmlns="http://www.w3.org/2000/svg" width="50%" height="50%" viewBox="0 0 384 512">
        <!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.-->
        <path fill="#ffffff" d="M214.6 9.4c-12.5-12.5-32.8-12.5-45.3 0l-128 128c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L160 109.3 160 480c0 17.7 14.3 32 32 32s32-14.3 32-32l0-370.7 73.4 73.4c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3l-128-128z"/>
    </svg>
</a>

<style>
.icon-link {
    display: block;          /* Use block to allow margin to work */
    margin: -3px 0;        /* Add top and bottom margins (adjust as needed) */
    text-align: center;     /* Center the text if needed */
}
</style>

Let me know if this works.

Hi, I have decided on a different icon and have an issue with this code. I changed the margin and it looks centred in the editor but not when viewing the live website.

URL: https://www.atmos.art/work/art/mediums/drawings

I used the code below:

<a href="#" class="icon-link">
    <svg xmlns="http://www.w3.org/2000/svg" width="70" height="70" fill="#FFFFFF" class="bi bi-arrow-up-square" viewBox="0 0 16 16">
  <path fill-rule="evenodd" d="M15 2a1 1 0 0 0-1-1H2a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1zM0 2a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2zm8.5 9.5a.5.5 0 0 1-1 0V5.707L5.354 7.854a.5.5 0 1 1-.708-.708l3-3a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1-.708.708L8.5 5.707z"/>
</svg>
</a>

<style>
.icon-link {
    display: block;          /* Use block to allow margin to work */
    margin: -10px 0;        /* Add top and bottom margins (adjust as needed) */
    text-align: center;     /* Center the text if needed */
}
</style>

Do you also know if it is possible to make the space inside of the border work for triggering the hover effect and clickable link? I imagine this is not possible as it is related to the shape of the SVG icon. I’d like the whole square to act as the active area without the viewbox triggering the effects.

The only way I have been able to do this so far is an image file version but the problem is that the area outside of the icon triggers the effects. Hope that made some sense.

I have uploaded two screenshots in case you are open to helping with this too.

Hi again, @atmos. For the alignment, I’ve updated the code, and now you have margin left and right. The updated code is provided below. Regarding the hover effect and clickable link, that's a bit trickier since it’s an SVG, but if I figure that aout I will definitely let you know 🙂

<a href="#" class="icon-link">
    <svg xmlns="http://www.w3.org/2000/svg" width="50%" height="50%" viewBox="0 0 384 512">
        <!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.-->
        <path fill="#ffffff" d="M214.6 9.4c-12.5-12.5-32.8-12.5-45.3 0l-128 128c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L160 109.3 160 480c0 17.7 14.3 32 32 32s32-14.3 32-32l0-370.7 73.4 73.4c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3l-128-128z"/>
    </svg>
</a>

<style>
.icon-link {
    display: block;          /* Use block to allow margin to work */
    margin-top: 10px !important;
  margin-bottom: 10px !important;
  margin-right: 10px !important;
  margin-left: 10px !important;
    text-align: center;
}
</style>