여백을 사용하여 이미지를 가운데 맞추는 방법을 알아낼 수 없습니다.

Question

여러 스레드를 검사하고 여러 옵션을 시도했습니다. 이미지와 컨테이너의 특정 너비를 설정하고 차단하도록 표시 설정을 시도했습니다. 내가 놓칠 수있는 다른 조건?

HTML :

<footer> 
    <div id="footercontent"> 
     <div id="logobox"> 
      <img src="images/logo.png" /> <--- THIS IS THE IMAGE IN QUESTION 
     </div> 
     <div id="social"> 

     </div> 
    </div> 
</footer> 

CSS :

footer { 
    width: 100%; 
    height: 200px; 
    background-color: white; 
    position: relative; 
    margin-top: 70px; 
} 
#footercontent { 
    width: 70%; 
    height: 100%; 
    background-color: black; 
    margin: auto; 
} 
#logobox { 
    width: 30%; 
    height: 100%; 
    margin-right: 0; 
    float: left; 
} 
img { 
    height: 70%; 
    position: absolute; 
    margin: auto; 
    display: block; 
} 
#social { 
    width: 70%; 
    height: 100%; 
    background-color: white; 
    float: left; 
} 

Answer 1

이 position: absolute를 제거하고 img에 margin: 0 auto을 적용합니다. 일부 요소에 position: absolute이 적용되면 DOM의 정상적인 흐름에서 벗어납니다.

img { 
    height: 70%; 
    margin: 0 auto; 
    display: block; 
}