div 안에 가운데 이미지가있는 div를 가운데에 배치하려면 어떻게해야합니까?

큰 DIV 내에서 왼쪽으로 떠있는 각 DIV 가운데에 이미지를 배치하고 싶습니다.div 안에 가운데 이미지가있는 div를 가운데에 배치하려면 어떻게해야합니까?

다음 예제에서는 회색 상자 ("assetInfoBody")를 초록색 상자 ("assetBox") 가운데 가운데에 표시하려고합니다. 텍스트 정렬 옆에있는 다른 시도는 무엇입니까? 중앙 및 여백 : 자동?

<!DOCTYPE html> 
<html> 
    <head> 
     <style type="text/css"> 
      #assets { 
       background-color: orange; 
       padding: 5px; 
       width: 100%; 
       height: 100%; 
      } 
      .assetbox { 
       background-color: lightgreen; 
       float: left; 
       width: 100px; 
       margin-right: 5px; 
          text-align: center; 
      } 

      .assetInfoBody { 
       background-color: grey; 
       position: relative; 
       width: 80px; 
       text-align: center; 
      } 

      .centeredItem { 
       margin-left: auto; 
       margin-right: auto; 
       top: 0px; 
      } 

     </style> 
    </head> 
    <body> 
     <div id="assets"> 
      <div class="assetbox"> 
       <div class="assetInfoBody"> 
        <div class="centeredItem"> 
         <img src="images/box.png"/> 
        </div> 
       </div> 
      </div> 
      <div class="assetbox"> 
       <div class="assetInfoBody"> 
        <div class="centeredItem"> 
         <img src="images/box.png"/> 
        </div> 
       </div> 
      </div> 
      <div class="assetbox"> 
       <div class="assetInfoBody"> 
        <div class="centeredItem"> 
         <img src="images/box.png"/> 
        </div> 
       </div> 
      </div> 
     </div> 
    </body> 
</html>

출처

2012-08-07 Edward Tanguay

, 당신이 여백 왼쪽이 참조 : 자동; margin-right : 자동; in centeredItem. assetInfoBody에서 복사/붙여 넣기를하면이 기능이 작동하지 않습니까? 그냥 물어 보는 건데. –

사실 실제로 위의 예에서 그렇습니다. 문제는 그래픽으로 만든 모서리가 적용되어 있으므로이 예제를 빌드해야하는 HTML과 일치시키기 위해 assetInfoBody가 절대적이어야한다는 것입니다. 약간 다른 문제가되지만, 이것에 대한 명확성을 가져 주셔서 감사합니다. –

enter image description here

는 당신이 얻을 수있는 방법에 대한 참조를 위해 this example를 참조하십시오. 클래스 .assetInfoBody 클래스는 너비가 설정되어 있으므로 margin:0 auto 규칙을 적용하여 .centeredItem을 정렬 할 수 있습니다. text-align:center을 .centeredItem에 적용하면 이미지를 항상 가운데에 둘 수 있습니다.

출처

2012-08-07 13:41:20 aivou

아마 당신은 CSS를 그런 식으로 원하는 : CSS를 전문가없이

#assets { 
    background-color: orange; 
    padding: 5px; 
    width: 100%; 
} 
.assetbox { 
    background-color: lightgreen; 
    display: inline-block; 
    width: 100px; 
    margin-right: 5px; 
} 

.assetInfoBody { 
    background-color: grey; 
    margin: 0 auto !important; 
    width: 80px; 
} 

.centeredItem { 
    margin-left: auto; 
    margin-right: auto; 
}

출처

2012-08-07 13:43:25 N4553R

div 안에 가운데 이미지가있는 div를 가운데에 배치하려면 어떻게해야합니까?

답변

관련 문제