链接中的中心图像[重复]答案

【问题标题】：Center image in a link [duplicate]链接中的中心图像[重复]
【发布时间】：2021-12-19 02:49:07
【问题描述】：

我有一个附属链接，其中还有一张图片。它看起来像这样：

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

我怎样才能使整个事情居中？我正在通过 tablepress 在 WordPress 表格中使用它。

【问题讨论】：

【解决方案1】：

试试这个。将所需的标签包装在一个 DIV 中，并将 text-align:center 应用于该 div。

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

要同时使图像顶部/底部和左侧/右侧居中，您可以使用任一 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>

或网格：

.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>

注意：

对于任何示例，您都可以添加样式属性

一个。在 div 上的 style= 标签内 （如第一个示例）,

或（如后两个例子） via：

b.文档中的<style></style> tag（正文或头部，以任何一个为准），或

c。在外部filename.css 中，您通过头部中的<link rel="stylesheet" etc> 标签包含。

第一种方法 (a) 虽然使用过，但尽可能不鼓励使用。在可行的情况下，首选方法 (c)。

【讨论】：