div 내에서 4 개의 div를 가운데에 맞 춥니 다

4 개의 div의 정렬 된 2 개의 div가 가운데에있는 컨테이너 div의 내용을 가운데에 놓으려고합니다. 그러나 가운데에 오지는 않습니다.div 내에서 4 개의 div를 가운데에 맞 춥니 다

Google 크롬 및 다른 브라우저에서 이것이 일어나는 이유를 잘 모릅니다.

아래 코드는 도움이됩니다.

CSS :

.container{ 
    margin: auto; 
    width:80%; 
    height:900px; 
    display: block; 
    text-align: center; 
} 

.column, .columns { 
    float:left; 
    min-height:1px; 
    padding:0 15px; 
    position:relative 
} 

section#{ 
    width: 100%; 
    min-height: 500px; 
    background: url(../images/sidebar_shadow.png) repeat-y left top; 
    float: left; 
    margin-top: -2px; 
} 

.button.largebutton { 
    min-width:400px; 
    min-height:300px; 
    float:left; 
    margin: 60px; 
}

PHP이되는

<section id="main" class="column"> 
    <h1 class="info_bar">My Surveys</h1> 
    <div class="container"> //contents of this div to be centered 
     <?php include 'tabcontainer_surveyholder.php'; ?> //pulls the four divs 
    </div> 
</section>

출처

2014-01-29 akkarthe

codepen, 귀하의 질문은 PHP 파일을 참조하는이, 어떤이 일이 여기에

.wrapper{ position:relative; left:50%; margin-left:-(half of its total width); }

를? – Sam

세로 또는 가로 가운데에 정렬하고 싶습니까? 아니면 둘다? –

당신의 PHP 파일 안에 무엇입니까. 컨테이너 내부의 div 클래스는 무엇입니까? 모호. – bring2dip

하나 개의 솔루션 : 래퍼에서

랩 4 DIV 년대. 콘솔에서 래퍼의 너비를 참조하고 다음 CSS를 쓰기 : 더 많은 코드를 추가

click me

출처

2014-01-29 13:07:51

내가 이렇게하면 IE에 중심을 두지 않는다. ?? 확실하지 무엇을 할 수 있습니까? 제발 .... 래퍼에서 px 대신 백분율을 사용하고 있습니다 ... .wrapper {position : relative; 너비 : 80 %; 왼쪽 : 50 %; margin-left : -40 %; float : left;} – akkarthe

나는 지금 그것을 확인했다. 그것은 IE8까지 잘 동작한다. 문제가있는 경우 스크린 샷을 공유하십시오. –

div 내에서 4 개의 div를 가운데에 맞 춥니 다

답변

관련 문제