如何为每个设备将 link 和两张照片居中？

Question

我的页面结构如下：

<body>
  <a href="...">
    <img src="..." height="160" width="261">
    <img src="..." height="160" width="160">
  </a>
</body>

对于每台设备，使这两张图片恰好位于中间（彼此相邻）的最佳方法是什么？
可以不用额外的 div 吗？
请不要要求我使用表格

提前致谢

Answer 1

     a {
        display: flex;
        width:auto;
     }

Answer 2

您可以通过多种方式实现这一目标。如果你想保持 html 结构不变，那么你可以放置你的锚标记，然后放置 50% 的水平和垂直间距，并将其推回到它自己的高度和宽度。

a{
  position: absolute;
  top: 50%; left: 50%; /* push it to vertically & horizontally */
  transform: translate(-50%, -50%); /* push it back of it's own width & height */
}

View the demo

如何为每个设备将 link 和两张照片居中？

how to center a link with two pics for every device?

html

css

position

css-position