Question

我有一个包含图像的锚点，我希望将其置于引导导航栏的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

删除此CSS

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

在徽标上添加保证金0 auto

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

Answer 2

我强烈推荐以下文章： 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(http://fillmurray.com/200/300);
    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>

将一个锚标记居中在div中

2 个答案: