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

试试这个

＆＃13;

.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%);
}

＆＃13;

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

2 个答案: