居中DIV中的锚标签

问题描述：

的高度和图像的宽度的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; 
}

尝试增加'的text-align：center'到导航栏头 –

你已经尝试过的答案在这里：http://stackoverflow.com/questions/27037514/how-to-center-brand-image-in-navbar和这里：http://stackoverflow.com/questions/23400234/centering-brand-logo-in-bootstrap -3-导航栏 – ZimSystem

答

删除这个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; 
}

答

我极力推荐的以下文章： 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中的锚标签

相关推荐