2014-11-06 3 views
1

문제가 있습니다. 이건 내 코드입니다 :div를 가운데에 넣으십시오.

<body> 
    <div class="imerologio"> 
     <div id="imerologio-mistika">  
      <a href="foo"><img src="#"></a> 
     </div> 

     <div id="imerologio-xarti">  
      <a href="foo"><img src="#"></a> 
     </div> 
    </div> 

그리고 내 CSS는 다음과 같습니다

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

#imerologio-mistika{ 
    background: url("../images/imerologio/mistika.png") no-repeat; 
    float:left; 
} 

#imerologio-xarti{ 
    background: url("../images/imerologio/xarti.png") no-repeat; 
    float:left; 
} 

나는 내부 div의 중심을 지팡이,하지만 난 할 수 없습니다. 어떤 도움이 필요합니까?

+0

텍스트 정렬 : 센터; – cport1

답변

1

부유물을 제거해야하며 display: inline-block을 품목으로 설정하고 text-align: center을 컨테이너로 설정해야합니다.

.imerologio { 
 
    text-align: center; 
 
    width: 100%; 
 
} 
 
#imerologio-mistika { 
 
    background: url("../images/imerologio/mistika.png") no-repeat; 
 
    display: inline-block; 
 
    width: 50%; 
 
} 
 
#imerologio-xarti { 
 
    background: url("../images/imerologio/xarti.png") no-repeat; 
 
    display: inline-block; 
 
    width: 50%; 
 
}
<div class="imerologio"> 
 
    <div id="imerologio-mistika"> 
 
    <a href="foo"> 
 
     <img src="#"> 
 
    </a> 
 
    </div><!-- 
 

 
    --><div id="imerologio-xarti"> 
 
    <a href="foo"> 
 
     <img src="#"> 
 
    </a> 
 
    </div> 
 
</div>

+0

그래,하지만이 이미지가 너비가 넓어 지길 원한다면? – xarlap

+0

달성하고자하는 것을 설명하십시오. – emmanuel

+0

내부 div를 추가하면 세 이미지가 가운데에 위치하며 왼쪽과 오른쪽에 큰 공간이 있습니다. 이 3 개의 이미지를 배경 너비에 맞 춥니 다. – xarlap

관련 문제