헤더 이미지 중앙에 넣기

저는 CSS 코딩을 처음 접했습니다. 나는 이미지를 중심에 놓으려고 시도 중이며 중심에 올릴 수 없습니다. 내가 아는 바로는, 관련 코드는 다음과 같다 :헤더 이미지 중앙에 넣기

CSS 코드 :

#header img { 
    align: center; 
    margin-top: 5px; 
    margin-left: 10px; 
}

는 HTML 파일을 그대로 코드 : 내가 느끼는

<div id="header"> 
<a href="$settings[shopurl]"> 
<img src="https://capa.lunarmania.com:2083/cpsess1188922546/viewer/home%2famysp0%2fpublic_html%2fimages/AmyPromos.png" border="0" align="center" alt="" /> 
</a> 
</div>

마치 내가 뭔가를 놓치고있는 것처럼 보이지만 그것을 발견하거나 알아 내지 못한다. 전혀 도움이됩니다. 이미지는 내가 요청한 것처럼 헤더에서 가운데에 정렬하는 대신 웹 페이지의 왼쪽 상단에 완고하게 자리 잡고 있습니다.

출처

2014-12-09 Rachel Holmes

확인 CSS와 (http://www.w3.org/Style/Examples/007/center.en.html) 일을 중심으로]에이 글이 바이올린을 확인하십시오. 이미지 섹션이 있습니다. HTML5에서는 img align 태그가 사용되지 않습니다. – adamdc78

몇 가지 문제가 있습니다. 먼저 text-align이 아니고 align이 아닙니다.

CSS의 중심 맞춤은 때때로 text-align: center으로 설정하는 것처럼 간단하지 않습니다. 때로는 내용과 같은 크기의 블록 수준 요소가 있습니다. 이 경우 div가 이미지만큼 큰 경우 div에 가운데 놓기 때문에 이미지가 가운데로 이동하지 않습니다. div도 중심에 있는지 또는 이미지를 가운데에 놓을만한 크기만큼 div인지 확인하십시오.

또한 text-align: center은 내용이 안에 있으며 요소 자체가 아니라 요소에 영향을줍니다. 따라서 이미지의 경우가 아니라 센터링 CSS가 #header에 있어야합니다.

마지막으로 물리적으로 요소의 중심을 맞추려면 블록 수준 요소 (예 : div의 경우 기본값은 display: block)이어야하며 왼쪽과 오른쪽에 자동 여백이 있어야합니다. margin-left 및 margin-right을 auto으로 설정하거나 margin: topbottom auto 또는 margin: top auto bottom과 같은 축약어를 사용하여이 작업을 수행 할 수 있습니다.

이 특별한 경우에는 #header 요소에 text-align: center을 설정하고 싶지만 일반적으로 "이미지 가운데 맞춤"은 한 줄만 사용하는 것보다 복잡합니다.

출처

2014-12-09 21:37:36 Undeterminant

이미지를 가운데 맞추기보다는 #header의 가운데에 배치해야합니다. http://jsfiddle.net/10py5mu6/

#header { 
    width: 600px; 
    text-align: center; 
    padding-top: 20px; 
    padding-bottom: 20px; 
    border: solid 1px #000; 
}

출처

2014-12-09 21:42:13 kyle

헤더 이미지 중앙에 넣기

답변

관련 문제