페이지 중앙에 div를 정렬하는 방법

-2

모바일 웹 사이트를 만들고 있습니다 & 문제가 생겼습니다. 나는 메인이 div이고 그 안에 3 개의 div이있다. 이전에는 왼쪽으로 정렬하고 싶었지만 이제는이 세 개의 페이지를 페이지 중앙에 정렬하려고합니다. 즉 장치의 화면이 넓 으면 센터로 와야하며, 바로 왼쪽으로 정렬됩니다.페이지 중앙에 div를 정렬하는 방법

많은 방법을 시도했지만 얻을 수 없었습니다. 다음은 코드입니다 & css 크기가 em 안에 있어야합니다. & 픽셀이 아닙니다. 나는 곧 그 문제를 해결할 것이다.

<div class="main-buttons"> 
<div class="box1"><a href="#"></a></div> 
<div class="box2"><a href="#"></a></div> 
<div class="box3"><a href="#"></a></div> 
</div><!-- MAIN BUTTONS ENDS HERE --> 


.main-buttons{ height:42px; padding:5px 10px 5px 10px; background-color:#FFFFFF; border-bottom:dotted 1px #7c7c7c;} 

.box1 a { background-image:url(images/box1.jpg); height:42px; margin-right:6px; width:65px; } 
.box2 a { background-image:url(images/box2.jpg); height:42px; margin-right:6px; width:65px; } 
.box3 a { background-image:url(images/box2.jpg); height:42px; width:65px; }

출처

2012-01-21 Aditi Nilangekar

가능한 중복 : http://stackoverflow.com/questions/953918/how-to-align-a-div-to-the-middle-of-the- 페이지 – madflow

margin 속성을 설정하면 CSS에서이를 구현할 수 있습니다. 부모 사업부는 다음과 같은 CSS를 사용하고

.main-contents 
{ 
    margin: 10px auto; 
    height:42px; 
    padding:5px 10px 5px 10px; 
    background-color:#FFFFFF; border-bottom:dotted 1px #7c7c7c; 
    overflow: hidden; 
} 

.box1, .box2, .box3 
{ 
    float:left; 
}

출처

2012-01-21 18:02:28

답장을 보내 주셔서 감사합니다. 작동하지 않습니다. 미안, 내 질문에 혼란 스럽다면 나는 그것이 수평으로 정렬되기를 원한다. –

어떻게 이것이 작동하지 않을지 모르겠다. ".main-buttons"에 대한 CSS에서 내가 지정한 margin 속성을 추가하면 원하는대로 작동 할 것이다 .... –

나는 당신이 원하는 것을 가정하는 추가적인 속성을 가진 대답 ..... –

잘 난 그냥 CSS를 & 하나 개 더 라인이 DIV 내에서 내 서브 DIV 년대를 넣어했다 추가했다 솔루션을 가지고 작업을해야 들어

. 내 메인 부모 div에 너비를 추가하고 싶지 않으므로 divdiv를 하나 더 추가하여 {margin:0 auto;}에게주었습니다. 이 방법이 맞는지는 모르겠지만 문제가 해결되었습니다.

<div class="main-buttons"> 
<div class="sub-buttons"> 
<div class="box1"><a href="#"></a></div> 
<div class="box2"><a href="#"></a></div> 
<div class="box3"><a href="#"></a></div> 
</div><!-- SUB DIV ENDS HERE --> 
</div><!-- MAIN BUTTONS ENDS HERE -->

CSS :

.main-buttons{ height:42px; padding:5px 10px 5px 10px; background-color:#FFFFFF; border-bottom:dotted 1px #7c7c7c;} 
.sub-buttons{ width:202px; height:42px; margin:0 auto;} 

.box1 a { background-image:url(images/box1.jpg); height:42px; margin-right:6px; width:65px; } 
.box2 a { background-image:url(images/box2.jpg); height:42px; margin-right:6px; width:65px; } 
.box3 a { background-image:url(images/box2.jpg); height:42px; width:65px; }

출처

2012-01-27 06:09:53

페이지 중앙에 div를 정렬하는 방법

답변

관련 문제