센터 Div와 Foundation Zurb의 두 div 사이에

방금 Foundation을 사용하기 시작했습니다. 나는 질문이있다. 나는 로고가 수평 중심, 상단 및 2 개의 전체 div 사이에 있어야한다는 디자인이 있습니다 (첨부 된 그림 참조).센터 Div와 Foundation Zurb의 두 div 사이에

아래의 코드는 제대로 작동하는 것으로 보이지만 화면 변경시 크기가 변경되지 않으며 Foundation에서 작업 할 때 더 좋은 방법이 있는지 궁금합니다.

로고를 Foundation에보다 잘 통합하기 위해 가능한 개선이 있습니까? 즉, 화면이 바뀌거나 이것이 최선의 선택 일 때 크기를 바꾼 방식으로 로고를 통합 할 수있는 방법이 있습니까? 여러 화면을 수동으로 다시 크기 조정해야합니까?

HTML

<div class="row fullWidth"> 
    <div class="large-12 columns box"> 

       <img src="logo.png" class="logo"> 

     </div> 
</div> 

<div class="row fullWidth"> 
    <div class="large-12 columns box"> </div> 
</div>

CSS 당신이 로고의 높이를 알고있는 경우

.fullWidth { 
    width: 100%; 
    margin-left: auto; 
    margin-right: auto; 
    max-width: initial; 
    position: relative; 
} 

.logo{ 
    position:absolute; 
    left: 50%; 
    top: 20px; 
    margin-left: -100px;// half-width of logo 
    z-index: 20; 
} 


.box{ 
    background-color: #333; 
    height: 120px; 
    margin-bottom: 10px; 
}

enter image description here

출처

2014-09-10 fs_tigre

, 당신은 margin-top뿐만 아니라 부정적인 사용할 수 있지만, 당신은 아마 포장해야합니다 새로운 div가있는 2 개의 외부 div.

HTML :

<div class="outer"> 
    <div class="row fullWidth"> 
     <div class="large-12 columns box"> 
      <img src="logo.png" class="logo"> 
     </div> 
    </div> 
    <div class="row fullWidth"> 
     <div class="large-12 columns box"> </div> 
    </div> 
</div>

CSS :

.outer { 
    width: 100%; 
    position:relative; 
} 

.fullWidth { 
    width: 100%; 
    margin-left: auto; 
    margin-right: auto; 
    max-width: initial; 
    // position: relative; // REMOVED 
} 

.logo{ 
    position:absolute; 
    left: 50%; 
    top: 50%; 
    margin-left: -100px;// half-width of logo 
    margin-top: -100px;// half-height of logo 
    z-index: 20; 
}

출처

2014-09-10 12:30:27 Tzach

불행히도 이것은 트릭을하지 못했습니다. 내가 수동으로 크기를 조정합니다, 감사합니다 –

당신은 만들기 위해 다음과 같은 작업을 수행 할 수는 중앙

<div class="row fullWidth"> 
    <div class="large-12 columns box"> 
     <img src="logo.png" class="logo"> 
     </div> 
     <div class="row fullWidth"> 
     <div class="large-12 columns box"> </div> 
    </div> 
</div>

DEMO

출처

2014-09-10 12:33:30 Benjamin

작동하지 않았어. 고마워. 미디어 쿼리 중 하나에서 수동으로 크기를 조정합니다. –

크기를 조정하지 않는 로고입니까? 그렇다면 다음을 시도하십시오.

.logo{ 
    position:absolute; 
    left: 50%; 
    top: 20%; 
    margin-left: -100px;//half-width of logo 
    z-index: 20; 
}

로고의 크기를 조정할 수 있어야합니다.

출처

2014-09-10 12:37:03

아니, 운이 없다. 감사 –

센터 Div와 Foundation Zurb의 두 div 사이에

답변

관련 문제