사진을 가운데에 배치하는 방법?

Question

나는 중간에 그림을 배치하고 싶다. 스팬의 클래스는 centerMe이지만 그림에는 영향을주지 않습니다. centerMe의

마크 업 :

.region.region-footer .centerMe{ 
    text-align: center; 
    } 

당신은 JSFiddle에이 예제를 찾을 수 있습니다. 어떤 도움

Answer 1

span이 (가) 인라인 요소이므로 발생하지 않습니다.

text-align:center 이미지의 전체 너비와 범위 너비가 정확히 동일하므로 영향을 미치지 않습니다. 100 % 너비로 지정하면 차이 만 보입니다.

또한 width 요소는 inline 요소에서 작동하지 않으므로 또는 inline-block으로 변경하십시오.

마크 업에 width을 추가

.centerMe { 
    width:100%; 
    display:inline-block; 
} 

여기 fiddle 업데이트되었습니다.

다른 해결책은 다소 spandiv를 사용하는 것보다, 또는 psection 원하는 block 소자를 사용하는 것이다.

Answer 2

에 대한

덕분에 당신은 인라인 요소 text-align: 그 방법을 사용할 수 없습니다.

달성하려는 경우 스팬을 <p> 요소 (블록)로 변경해야합니다.

Answer 3

스팬 자체가 전체 폭이 없으므로에 이미지의 중심을 할 공간이 없습니다. 당신은 div로 span을 변경하여이 문제를 해결할 수 있습니다.

또는 당신이 CSS에 display: block를 추가하여이 사업부처럼 행동 할 수 있습니다 : 또는

.centerMe{ 
    display: block; 
    text-align: center; 
    } 

, 당신은 그것을 Hiral 제안처럼 width: 100%을 줄 수 있지만, 당신은 어떤 테두리, 패딩을해야하고 마진도 고려해야한다. 블록 요소처럼 동작하게함으로써 자동으로 사용 가능한 공간을 차지하게되고 더 유연한 솔루션이라고 생각합니다.