Center image in a link

Question

I am having an affiliate link and in it also an image. It looks like this:

<a href="my/link"> <img src="my/image"> </a> <img src="my/image"/>

How can I center the whole thing? I am using it inside a WordPress table through tablepress.

Answer 1

Try this. Wrap the desired tags in a DIV, and apply text-align:center to that div.

<div style="width:100%;text-align:center;">
<a href="my/link"> <img src="https://placekitten.com/50/50"> </a>
</div>

To center the image top/bottom and left/right at the same time, you can use either flexbox:

.flexboxOnParentDiv{
  width:100%;
  height:150px;
  border:1px solid red;
  display:flex;
  align-items:center;
  justify-content:center;
}

<div class="flexboxOnParentDiv">
<a href="#" style=""> <img src="https://placekitten.com/50/50"> </a>
</div>

or grid:

.gridOnParentDiv{
  width:100%;
  height:150px;
  border:1px solid red;
  display:grid;
  place-content:center;
}

<div class="gridOnParentDiv">
<a href="#" style=""> <img src="https://placekitten.com/50/50"> </a>
</div>

Note:

For any of the examples, you can add the style properties

a. inside the style= tag on the div (as in the first example),

or (as in the latter two examples) via:

b. A <style></style> tag within the document (body or head, whichever), or

c. in an external filename.css that you include via a <link rel="stylesheet" etc> tag in the head.

The first method (a), although used, is discouraged whenever possible. Method (c) is preferred wherever feasible.