Comment aligner le texte verticalement et horizontalement sur une image dans une colonne-bloc dans la fondation zurb 6

J'ai essayé de nombreuses approches pour centrer horizontalement et verticalement un titre h4 sur une image, qui se trouve à l'intérieur d'une colonne avec la colonne -block "propriété dans une grille de bloc dans Foundation 6.Comment aligner le texte verticalement et horizontalement sur une image dans une colonne-bloc dans la fondation zurb 6

Je l'ai fait fonctionner un peu sur la première image, mais il n'est pas réactif et je sais que ce n'est pas correct. Je ne trouve rien sur le web qui traite de ce problème spécifique; Je suis surpris que ce soit si difficile à résoudre.

Voici mon code (il me reste un peu de code en ligne parce que je l'ai essayé différentes options ...):

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 -->

Source

2017-09-25 Steve Juliusson

Si vous allez utiliser des images à l'intérieur des colonnes, alors vous feriez mieux d'utiliser la position: absolute pour votre texte.

Fondation a mixins pour cette

@include absolute-center;

qui ne

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

Voir par exemple: https://codepen.io/rafibomb/pen/qPRVad

Source

2017-09-26 00:04:07 rafibomb

Comment aligner le texte verticalement et horizontalement sur une image dans une colonne-bloc dans la fondation zurb 6

Répondre

Questions connexes