앵커 태그 내부의 가운데 이미지

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

을이 켜지지 경우에만 패딩 <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

float를 제거하고 display : anchor 태그와 여백을 설정합니다. 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>