Linked images that are inside a grid are off the center vertically-CodePudding

When I add a link to images that are located in a grid, they become slightly off the center vertically. How can I fix their vertical positioning to make them perfectly vertically centered?

Here's my code. Six images: four that are inside the grid consist of two SVGs and two PNGs. Two of them have <a> tag that causes the problem. It's weird because the same problem doesn't appear on the linked image that is outside the grid.

  .mygrid {
    height: 50px;
    display: grid;
    grid-template-columns: repeat(4, 50px);
    align-items: center;
  }

  .myimage {
    height: 32px;
    width: 32px;
  }

<div >
  <!-- SVG with link -->

  <a href="javascript:void(0)">
    <svg width="32" height="32" xmlns="http://www.w3.org/2000/svg">
      <style>
        * {
          pointer-events: fill;
        }
      </style>
      <g >
        <circle id="btnwanavbg" cx="16" cy="16" r="16" fill="#24CC42" />
        <path
          id="btnwanavlogo"
          fill="#fff"
          d="M21.04 18.183c-.274-.136-1.62-.794-1.87-.886-.25-.09-.433-.136-.616.138-.183.27-.707.885-.866 1.067-.16.182-.32.204-.593.068-.274-.137-1.156-.424-2.202-1.352-.813-.722-1.363-1.614-1.522-1.887-.16-.272-.018-.42.12-.556.123-.122.273-.318.41-.476.138-.16.183-.274.274-.456.092-.181.046-.34-.023-.477-.068-.136-.615-1.477-.844-2.023-.222-.53-.447-.458-.615-.467a11.79 11.79 0 0 0-.525-.01c-.182 0-.48.069-.73.342-.251.272-.958.931-.958 2.272 0 1.34.98 2.636 1.118 2.818.137.181 1.93 2.933 4.675 4.113.654.28 1.163.448 1.56.573.656.208 1.253.179 1.725.108.525-.078 1.619-.659 1.847-1.295.228-.636.228-1.182.16-1.295-.069-.114-.25-.182-.525-.319zm-4.993 6.787h-.004a9.124 9.124 0 0 1-4.635-1.264l-.332-.196-3.446.9.92-3.344-.217-.342a9.008 9.008 0 0 1-1.391-4.822c.001-4.996 4.085-9.06 9.108-9.06 2.432 0 4.718.944 6.437 2.656a8.97 8.97 0 0 1 2.664 6.41c-.002 4.996-4.087 9.062-9.104 9.062zm7.748-16.773a10.887 10.887 0 0 0-3.553-2.371A10.928 10.928 0 0 0 16.046 5C10.009 5 5.094 9.89 5.092 15.901a10.835 10.835 0 0 0 1.462 5.45L5 27l5.806-1.516a10.985 10.985 0 0 0 5.236 1.327h.005c6.036 0 10.951-4.89 10.953-10.902a10.79 10.79 0 0 0-.827-4.175 10.833 10.833 0 0 0-2.378-3.537"
        />
      </g>
    </svg>
  </a>

  <!-- SVG without link -->

  <svg width="32" height="32" xmlns="http://www.w3.org/2000/svg">
    <style>
      * {
        pointer-events: fill;
      }
    </style>
    <g >
      <circle id="btnwanavbg" cx="16" cy="16" r="16" fill="#24CC42" />
      <path
        id="btnwanavlogo"
        fill="#fff"
        d="M21.04 18.183c-.274-.136-1.62-.794-1.87-.886-.25-.09-.433-.136-.616.138-.183.27-.707.885-.866 1.067-.16.182-.32.204-.593.068-.274-.137-1.156-.424-2.202-1.352-.813-.722-1.363-1.614-1.522-1.887-.16-.272-.018-.42.12-.556.123-.122.273-.318.41-.476.138-.16.183-.274.274-.456.092-.181.046-.34-.023-.477-.068-.136-.615-1.477-.844-2.023-.222-.53-.447-.458-.615-.467a11.79 11.79 0 0 0-.525-.01c-.182 0-.48.069-.73.342-.251.272-.958.931-.958 2.272 0 1.34.98 2.636 1.118 2.818.137.181 1.93 2.933 4.675 4.113.654.28 1.163.448 1.56.573.656.208 1.253.179 1.725.108.525-.078 1.619-.659 1.847-1.295.228-.636.228-1.182.16-1.295-.069-.114-.25-.182-.525-.319zm-4.993 6.787h-.004a9.124 9.124 0 0 1-4.635-1.264l-.332-.196-3.446.9.92-3.344-.217-.342a9.008 9.008 0 0 1-1.391-4.822c.001-4.996 4.085-9.06 9.108-9.06 2.432 0 4.718.944 6.437 2.656a8.97 8.97 0 0 1 2.664 6.41c-.002 4.996-4.087 9.062-9.104 9.062zm7.748-16.773a10.887 10.887 0 0 0-3.553-2.371A10.928 10.928 0 0 0 16.046 5C10.009 5 5.094 9.89 5.092 15.901a10.835 10.835 0 0 0 1.462 5.45L5 27l5.806-1.516a10.985 10.985 0 0 0 5.236 1.327h.005c6.036 0 10.951-4.89 10.953-10.902a10.79 10.79 0 0 0-.827-4.175 10.833 10.833 0 0 0-2.378-3.537"
      />
    </g>
  </svg>

  <!-- IMG with link -->

  <a href="javascript:void(0)">
    <img
      
      src="https://cdn2.iconfinder.com/data/icons/social-messaging-ui-color-shapes-2-free/128/social-whatsapp-circle-512.png"
    />
  </a>

  <!-- IMG without link -->

  <img
    
    src="https://cdn2.iconfinder.com/data/icons/social-messaging-ui-color-shapes-2-free/128/social-whatsapp-circle-512.png"
  />
</div>

<!-- Outside the grid-->

<a href="index"
  ><img
    
    src="https://cdn2.iconfinder.com/data/icons/social-messaging-ui-color-shapes-2-free/128/social-whatsapp-circle-512.png"
  />
</a>

<img
  
  src="https://cdn2.iconfinder.com/data/icons/social-messaging-ui-color-shapes-2-free/128/social-whatsapp-circle-512.png"
/>

CodePudding user response：

So my advice with achieving consitancy, is to wrap your tags in a <div>. I've done this here and you can see the aligment is preserved without the strange off-centering.

CodePudding user response：

Wrap all of your anchor tags as divs, this give them a uniform size for the grid to latch onto. When we give the div's display:flex; we can then access their verticle centers globally.

Then by wrapping other elements, you'd all like in a line in another div, we can start a new row.

.mygrid {
    height: 50px;
    display: grid;
    grid-template-columns: repeat(4, 50px);
    align-items: center;
  }

  .myimage {
    height: 32px;
    width: 32px;
  }
div, a{
  display:flex;
}

<div >
  <!-- SVG with link -->
  <div>
    <a href="javascript:void(0)">
      <svg width="32" height="32" xmlns="http://www.w3.org/2000/svg">
        <style>
          * {
            pointer-events: fill;
          }
        </style>
        <g >
          <circle id="btnwanavbg" cx="16" cy="16" r="16" fill="#24CC42"/>
          <path
            id="btnwanavlogo"
            fill="#fff"
            d="M21.04 18.183c-.274-.136-1.62-.794-1.87-.886-.25-.09-.433-.136-.616.138-.183.27-.707.885-.866 1.067-.16.182-.32.204-.593.068-.274-.137-1.156-.424-2.202-1.352-.813-.722-1.363-1.614-1.522-1.887-.16-.272-.018-.42.12-.556.123-.122.273-.318.41-.476.138-.16.183-.274.274-.456.092-.181.046-.34-.023-.477-.068-.136-.615-1.477-.844-2.023-.222-.53-.447-.458-.615-.467a11.79 11.79 0 0 0-.525-.01c-.182 0-.48.069-.73.342-.251.272-.958.931-.958 2.272 0 1.34.98 2.636 1.118 2.818.137.181 1.93 2.933 4.675 4.113.654.28 1.163.448 1.56.573.656.208 1.253.179 1.725.108.525-.078 1.619-.659 1.847-1.295.228-.636.228-1.182.16-1.295-.069-.114-.25-.182-.525-.319zm-4.993 6.787h-.004a9.124 9.124 0 0 1-4.635-1.264l-.332-.196-3.446.9.92-3.344-.217-.342a9.008 9.008 0 0 1-1.391-4.822c.001-4.996 4.085-9.06 9.108-9.06 2.432 0 4.718.944 6.437 2.656a8.97 8.97 0 0 1 2.664 6.41c-.002 4.996-4.087 9.062-9.104 9.062zm7.748-16.773a10.887 10.887 0 0 0-3.553-2.371A10.928 10.928 0 0 0 16.046 5C10.009 5 5.094 9.89 5.092 15.901a10.835 10.835 0 0 0 1.462 5.45L5 27l5.806-1.516a10.985 10.985 0 0 0 5.236 1.327h.005c6.036 0 10.951-4.89 10.953-10.902a10.79 10.79 0 0 0-.827-4.175 10.833 10.833 0 0 0-2.378-3.537"
          />
          </g>
        </svg>
      </a>
    </div>
    <!-- SVG without link -->
    <div>
      <svg width="32" height="32" xmlns="http://www.w3.org/2000/svg">
        <style>
          * {
            pointer-events: fill;
          }
        </style>
        <g >
          <circle id="btnwanavbg" cx="16" cy="16" r="16" fill="#24CC42"/>
          <path
            id="btnwanavlogo"
            fill="#fff"
            d="M21.04 18.183c-.274-.136-1.62-.794-1.87-.886-.25-.09-.433-.136-.616.138-.183.27-.707.885-.866 1.067-.16.182-.32.204-.593.068-.274-.137-1.156-.424-2.202-1.352-.813-.722-1.363-1.614-1.522-1.887-.16-.272-.018-.42.12-.556.123-.122.273-.318.41-.476.138-.16.183-.274.274-.456.092-.181.046-.34-.023-.477-.068-.136-.615-1.477-.844-2.023-.222-.53-.447-.458-.615-.467a11.79 11.79 0 0 0-.525-.01c-.182 0-.48.069-.73.342-.251.272-.958.931-.958 2.272 0 1.34.98 2.636 1.118 2.818.137.181 1.93 2.933 4.675 4.113.654.28 1.163.448 1.56.573.656.208 1.253.179 1.725.108.525-.078 1.619-.659 1.847-1.295.228-.636.228-1.182.16-1.295-.069-.114-.25-.182-.525-.319zm-4.993 6.787h-.004a9.124 9.124 0 0 1-4.635-1.264l-.332-.196-3.446.9.92-3.344-.217-.342a9.008 9.008 0 0 1-1.391-4.822c.001-4.996 4.085-9.06 9.108-9.06 2.432 0 4.718.944 6.437 2.656a8.97 8.97 0 0 1 2.664 6.41c-.002 4.996-4.087 9.062-9.104 9.062zm7.748-16.773a10.887 10.887 0 0 0-3.553-2.371A10.928 10.928 0 0 0 16.046 5C10.009 5 5.094 9.89 5.092 15.901a10.835 10.835 0 0 0 1.462 5.45L5 27l5.806-1.516a10.985 10.985 0 0 0 5.236 1.327h.005c6.036 0 10.951-4.89 10.953-10.902a10.79 10.79 0 0 0-.827-4.175 10.833 10.833 0 0 0-2.378-3.537"
          />
        </g>
      </svg>
    </div>

    <!-- IMG with link -->
  <div>
    <a href="javascript:void(0)">
      <img
        
        src="https://cdn2.iconfinder.com/data/icons/social-messaging-ui-color-shapes-2-free/128/social-whatsapp-circle-512.png"
      />
      </a>
    </div>
    <!-- IMG without link -->
  <div>
    <img
      
src="https://cdn2.iconfinder.com/data/icons/social-messaging-ui-color-shapes-2-free/128/social-whatsapp-circle-512.png"
    />
  </div>
</div>

<!-- Outside the grid-->
<div>
    <a href="index"> 
      <img
        
  src="https://cdn2.iconfinder.com/data/icons/social-messaging-ui-color-shapes-2-free/128/social-whatsapp-circle-512.png"
      />
    </a>
  </div>
  <div>
    <img
      
      src="https://cdn2.iconfinder.com/data/icons/social-messaging-ui-color-shapes-2-free/128/social-whatsapp-circle-512.png"/>
  </div>
</div>

hope this helps cheers,