Alignement vertical du texte dans la cellule d'un tableau

Question

J'ai un lien de limite d'événement dans une cellule de jour pour un calendrier complet et j'essaie de l'aligner verticalement en CSS.

Voici un lien vers mon violon js here

Il ressemble à fullcalendar encapsule un div autour de la balise d'ancrage qui est le lien de eventLimit, qui serait idéalement le meilleur élément pour aligner verticalement mais je ne sais pas si je peux y accéder en CSS. Peut-être que je peux en fullcalendar en quelque sorte avec eventRender ?? Est-ce que cela peut être fait facilement en CSS ou y a-t-il une meilleure façon de le faire en utilisant le calendrier complet?

$(document).ready(function() { 
 
\t \t 
 
\t \t $('#calendar').fullCalendar({ 
 
\t \t \t header: { 
 
\t \t \t \t left: 'prev,next today', 
 
\t \t \t \t center: 'title', 
 
\t \t \t \t right: '' 
 
\t \t \t }, 
 
\t \t \t //defaultDate: '2014-06-12', 
 
\t \t \t defaultView: 'basicWeek', 
 
\t \t \t editable: false, 
 
     height: 174, 
 
     eventLimit: 1, 
 
     eventLimitText: function (numEvents) { 
 
     \t return numEvents; 
 
     }, 
 
\t \t \t events: [ 
 
\t \t \t \t { 
 
\t \t \t \t \t title: 'Event', 
 
\t \t \t \t \t start: '2017-09-18' 
 
\t \t \t \t }, 
 
\t \t \t \t { 
 
\t \t \t \t \t title: 'Event', 
 
\t \t \t \t \t start: '2017-09-18' 
 
\t \t \t \t } 
 
\t \t \t ] 
 
\t \t }); 
 
\t \t 
 
\t });

Answer 1

Vous devez définir la hauteur de votre table pour correspondre à la hauteur de son conteneur

Essayez de mettre à jour votre CSS à ceci:

td.fc-more-cell { 
    text-align: center; 
    font-size: 2.3em; 
    vertical-align: middle 
} 

.fc-content-skeleton, 
table, 
tr { 
    height: 100%; 
} 

Answer 2

Utilisez la hauteur de ligne pour la ancre, il alignera verticalement le texte à l'intérieur de la cellule.

here est le violon;

td.fc-more-cell { 
     text-align: center; 
     font-size: 2.3em; 
} 
td.fc-more-cell a{ 
    line-height:85px; 
} 

Answer 3

Ici vous allez avec. vérifiez la JS Fiddle http://jsfiddle.net/rbynbu4z/1/

J'ai ajouté le code ci-dessous

.fc-row .fc-content-skeleton, 
.fc-row .fc-content-skeleton td, 
.fc-row .fc-content-skeleton table, 
.fc-row .fc-content-skeleton tr{ 
    height: 100%; 
    vertical-align: middle; 
} 
.fc-row .fc-content-skeleton td div { 
     display: inline-block; 
    line-height: 100%; 
}