居中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; 
}

來源

2017-04-13 Mike

嘗試增加'的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; 
}

來源

2017-04-13 13:06:56

我極力推薦的以下文章： 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>

來源

2017-04-13 13:17:49

居中DIV中的錨標籤

回答

相關問題