如何使图像与元素完美居中答案

【问题标题】：How to perfectly center image with elements如何使图像与元素完美居中
【发布时间】：2016-05-08 04:35:24
【问题描述】：

如何使图像背景的 img 或元素具有与其他链接相同的高度、填充和边距？

这是我的代码

  a   {
      display: inline-block;
      padding: 1%;
      border: 1px solid black;
      color: black;
      font-size: 15px;
    }
    a img {
      height: 15px;
      border: 1px solid red;
    }
    .backg {
      display: inline-block;
      padding: 1%;
      border: 1px solid red;
      color: black;
      background-image: url("https://cdn2.iconfinder.com/data/icons/ios-7-icons/50/user_male2-512.png");
      background-size: 100%;

    }

这里是代码笔http://codepen.io/anon/pen/ZQRyOd?editors=1100

【问题讨论】：

如果您希望元素大小固定，为什么要使用padding: 1%;？
我试过了，但我希望它是灵活的尺寸。

标签： html css css-position

【解决方案1】：

我不确定我是否理解了这个问题，但您可以将vertical-align: middle; 添加到.backg 和a img

【讨论】：

【解决方案2】：

在我看来，如果您不关心旧版浏览器，您应该使用 flexbox 这是一个不错的指南：

A Complete Guide to Flexbox

【讨论】：

我知道，但我想知道如何为旧版浏览器制作它