zurb 기초에서 column column-block의 이미지 위에 텍스트를 세로 및 가로로 정렬하는 방법 6

"가로 세로 비율로 이미지 위에 h4 제목을 가운데 및 세로로 배치하는 많은 방법을 시도했습니다. -block "속성을 사용합니다.zurb 기초에서 column column-block의 이미지 위에 텍스트를 세로 및 가로로 정렬하는 방법 6

첫 번째 이미지에서 다소 효과가 있었지만 반응이 없으며 올바르지 않습니다. 나는이 특정 문제를 다루는 웹상에서 아무것도 찾을 수 없다. 나는 해결하기가 너무 어렵다. 여기

내 코드입니다 (I은 다양한 옵션을 노력했기 때문에 나는 아직도 ... 일부 인라인 코드가) :

CSS :

.event-row { 
    position: absolute; 
    bottom: 58%; 
    max-width: 100%; 
    margin: auto; 
    padding-left: 8%; 
} 

.event-title { 
    position: relative; 
    margin: auto; 
    text-align: center; 
    vertical-align: center; 
    display: inline-block; 
    max-width: 100%; 
}

HTML :

<body> 
    <div class="row small-up-2 medium-up-3 large-up-3" style="position: relative;"> 
     <div class="column column-block"> 
     <img src="assets/events/book-release.jpg" width="600" height="600" class="thumbnail" alt="">   
     <div class="row event-row"> 
      <div class="small-12 columns"> 
       <h4 class="event-title" style="color:white;"> 
       BOOK PARTIES 
       </h4> 
      </div> 
      </div>  
     </div> 

     <div class="column column-block"> 
      <img src="assets/events/tent-event.jpg" width="600" class="thumbnail" alt="">  
     </div> 

     <div class="column column-block"> 
      <img src="assets/index/cooking-class-cu.jpg" width="600" class="thumbnail" alt=""> 
     </div> 

     <div class="column column-block"> 
      <img src="assets/index/wedding.jpg" width="600" class="thumbnail" alt=""> 
     </div> 

     <div class="column column-block"> 
      <img src="assets/events/moulin-rouge-cropped.jpg" class="thumbnail" alt=""> 
     </div> 

     <div class="column column-block"> 
      <img src="assets/events/conservatory-lunch-cropped.jpg" alt=""> 
     </div> 

     <div class="column column-block"> 
      <img src="assets/events/tea-party-cropped.jpg" class="thumbnail" alt=""> 
     </div> 

     <div class="column column-block"> 
      <img src="assets/events/rehearsal-dinner-cropped.jpg" class="thumbnail" alt=""> 
     </div> 

     <div class="column column-block"> 
      <img src="assets/events/baby-party.jpg" width="600" class="thumbnail" alt=""> 
     </div> 

     </div> <!-- end row --> 
    </div> <!-- end body -->

출처

2017-09-25 Steve Juliusson

하는 경우 당신은 칼럼 내부의 이미지를 사용하려고합니다. 그러면 위치를 사용하는 것이 가장 좋을 것입니다 : 절대적인 텍스트입니다. https://codepen.io/rafibomb/pen/qPRVad

재단은

position: absolute; 
top: 50%; 
left: 50%; 
transform: translate(-50%, -50%);

예를 참조하지 않습니다이

@include absolute-center;

의 믹스 인을 가지고

출처

2017-09-26 00:04:07 rafibomb

zurb 기초에서 column column-block의 이미지 위에 텍스트를 세로 및 가로로 정렬하는 방법 6

답변

관련 문제