アンカータグ内の中心画像

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のautoは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>