錨標記內的中心圖像

Question

需要將錨圖標記內的圖像置中。試過margin: 0 auto;。但沒有奏效。

這是fiddle。

我正在使用引導程序和自定義CSS。

Answer 1

.navbar-brand { 
    transform: translateX(-50%); 
    left: 50%; 
    position: absolute; 
} 

實現無線這個。

Answer 2

使標籤display:block; width:100%，然後設置與margin:0 auto圖像：

.navbar-brand { 
    display:block; 
    width:100%; 
} 
.navbar-brand img { 
    margin:0 auto; 
} 

FIDDLE

Answer 3

a.navbar-brand { 
    text-align: center; 
    display: inline-table; 
    position: relative; 
} 

如果neccessary只能去除填充<div class="container-fluid" style="padding-bottom: 30px">或使其padding-bottom:0;

Fiddle

感謝

Answer 4

刪除引導類 「導航欄品牌」 和下面的類取代

https://jsfiddle.net/y0yL3gna/3/

.class-name{ 
     text-align: center; 
     display: block; 
    } 

和HTML將

<div class="wrapper"> 
<div class="container"> 
<nav class="navbar bgcol col_org"> 
<div class="container-fluid" style="padding-bottom: 30px"> 
<div class="navbar-header"> 
<a class="class-name" href="#" target="_self"><img src="https://cdn4.iconfinder.com/data/icons/iconsimple-logotypes/512/android-128.png" alt="flower"></a> 
</div> 
</div> 
</nav> 
</div> 
</div> 

Answer 5

刪除浮動和設置顯示：錨點標記和邊距的塊：0自動將用於img標記。

.navbar-brand { 
    display:block; 
} 
.navbar-brand img { 
    margin: 0 auto; 
} 

Answer 6

我只是用你的風格修改了一些html。嘗試這個！

.wrapper { 
 
    background: #ccc; 
 
    padding-bottom: 10px; 
 
} 
 

 
.container { 
 
    background-color: #FFF; 
 
    box-shadow: 0px 2px 13px rgba(0, 0, 0, 0.2); 
 
    -webkit-box-shadow: 0px 2px 13px rgba(0, 0, 0, 0.2); 
 
    -moz-box-shadow: 0px 2px 13px rgba(0, 0, 0, 0.2); 
 
} 
 

 
.bgcol { 
 
    /*background-color: #1d3179;*/ 
 
    background-color: #000000; 
 
    border: #fff; 
 
    color: fff 
 
} 
 

 
.bgcol .navbar-toggle .icon-bar { 
 
    background-color: #FFF; 
 
} 
 

 
.bgcol a { 
 
    color: #FFF; 
 
} 
 

 
.col_org { 
 
    background: #1d3179; 
 
} 
 

 
.col_org:hover { 
 
    background: #1d3179; 
 
}

<div class="wrapper"> 
 
    <div class="container"> 
 
     <nav class="navbar bgcol col_org"> 
 
      <div class="container-fluid" style="padding-bottom: 30px"> 
 
       <div class="navbar-header"> 
 
        <a class="" style=" width: 100%; display: block;" href="#" target="_self"><img src="https://cdn4.iconfinder.com/data/icons/iconsimple-logotypes/512/android-128.png" style="margin: auto; display: block;" alt="flower"></a> 
 
       </div> 
 
      </div> 
 
     </nav> 
 
    </div> 
 
</div>