html - 将 anchor 标记居中放置在 div 中

Question

我有一个包含图像的 anchor ，我想在 Bootstrap 导航栏的 div 标签中居中

图像的高度和宽度未知，所以我想将它水平和垂直居中，而不必计算填充

<div class="navbar-header">
    <a class="navbar-left" href="index.html"><span role="link" class="logo"></span></a>
</div>

.navbar-header{
    width: 250px;
    height: 60px;
    float: left;
}

.navbar-left{
    float: left!important;
}

.logo {
    background-image: url(/image.png);
    background-position: center;
    background-size: 100%;
    border: none;
    display: block;
    height: 51px;
    width: 185px;
    margin: 0;
    text-indent: -9999px;
}

Answer 1

我强烈推荐以下文章: https://css-tricks.com/centering-css-complete-guide/

.navbar-header{
    width: 250px;
    height: 60px;
    float: left;
    background-color: rgba(255,0,0,0.1);
    position: relative;
}

.navbar-left{
    /* float: left!important; */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.logo {
    background-image: url(https://picsum.photos/id/10/555/153);
    background-position: center;
    background-size: 100%;
    border: none;
    display: block;
    height: 51px;
    width: 185px;
    margin: 0;
    padding: 0;
    text-indent: -9999px;
}

<div class="navbar-header">
    <a class="navbar-left" href="index.html">
      <span role="link" class="logo"></span>
    </a>
</div>