如何在 div 内的锚点内垂直居中图像？

Question

已经尝试了很多，verticle-align 和 line-height，但都没有成功。这是我到目前为止从互联网上尝试的建议，但如前所述没有成功。

        <div class="logo">
            <a href="#">
                <img src="example.png" width="150" height="50">
            </a>
        </div>

css:

        div.logo
        {
            height: 60px;

            margin-top: 0px;

            float:left;

            > a
            {
                height:60px;

                line-height: 60px;

                > img
                {
                    display:inline-block;

                    vertical-align: middle;
                    line-height: 60px;

                    float:left;
                }
            }
        }

已经预先感谢您的回复。

Answer 1

如果您将 display: table-cell 定义到 <a> 标签，您将自动实现。还有更多方法，但在您的情况下，这是最简单的方法：

        > a
        {
            height:60px;
            display: table-cell;
            vertical-align: middle; /* this is a table cell so it works! */
            > img
            {
                display:inline-block;
            }
        }

Answer 2

试试这个

.logo {
     display: table;
     height: 60px;
}

.logo a {
  display:table-cell;
  vertical-align: middle;
}

or

.logo {
  display: block;
  height: 60px;
  position: relative;
}

.logo a {
  display: block; 
  height: 50px;
  position: absolute; 
  top:50%; 
  left:50%;
  transform:translate(-50%,-50%);
}

如何在 div 内的锚点内垂直居中图像？

How to vertical center an image inside anchor inside div?

css

centering