Image won't center / align with button

[andrebocc]

Hi.

I’ve been trying to align an image to be centered within a button that the image is in. For whatever reason, the image wants to be off-centered. (picture of button shown below)

This is the code:

<a href="example.com">
      <button id="tweet">
        <input type="image" id="tweet2" src="https://cdn.glitch.com/ccb0e62e-3fdb-4ffe-a504-0eb8ac1a180f%2FUntitled%20drawing%20(13).png?v=1617992415375" />
      </button>
      </a>

The only css is for the button itself (which made it be round and blue). Shown here:

#tweet{
  background: #1DA1F2;
  height: 50px;
  width: 50px;
  border: 0px solid;
  border-radius: 1000px;
  box-shadow: 0px 0px 5px gray;
}

Does anyone know what could be causing this? Thank you

[no_one]

If i remove the width from your css, the image is centered.
Not sure how to fix this tough…

[andrebocc]

I’ve been messing around with it, and what I found to work is changing the css so the image is a background-image:

#tweet{
  background: #1DA1F2;
  background-image: url("https://cdn.glitch.com/ccb0e62e-3fdb-4ffe-a504-0eb8ac1a180f%2FUntitled%20drawing%20(13).png?v=1617992415375");
  background-size: 
  background: #1DA1F2;
  height: 50px;
  width: 50px;
  border: 0px solid;
  border-radius: 1000px;
  box-shadow: 0px 0px 5px gray;
}

and then removing the <input> line from the html:

<a href="example.com">
      <button id="tweet">
      </button>
      </a>

It’s strange but it works:

[no_one]

Oh, that’s great news! But you could also save some loading time by removing a few stuff:

<input type="submit" id="tweet" onclick="window.location.href='example.com'">