jQuery Datepicker-垂直居中日期

Question

我目前正在對jquery datepicker進行樣式設置，但在垂直居中放置日期位置方面感到吃力。

這是到目前為止我得到的： https : //jsfiddle.net/L4vrkpmc/1/

由於日期選擇器正在使用表

.ui-datepicker-calendar td{
  vertical-align:center;
}

但它行不通。 有人知道如何垂直居中嗎？

 html, body { height: 100%; } /* DatePicker Container */ #calendar { height: 100%; } .ui-datepicker { width: 100%; height: 100%; margin: 5px auto 0; font: 9pt Arial, sans-serif; -webkit-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, .5); -moz-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, .5); box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, .5); } .ui-datepicker a { text-decoration: none; } /* DatePicker Table */ .ui-datepicker table { width: 100%; height: 100%; text-align: center; } .ui-datepicker-header { background: url('../img/dark_leather.png') repeat 0 0 #000; color: #e0e0e0; font-weight: bold; -webkit-box-shadow: inset 0px 1px 1px 0px rgba(250, 250, 250, 2); -moz-box-shadow: inset 0px 1px 1px 0px rgba(250, 250, 250, .2); box-shadow: inset 0px 1px 1px 0px rgba(250, 250, 250, .2); text-shadow: 1px -1px 0px #000; filter: dropshadow(color=#000, offx=1, offy=-1); line-height: 30px; border-width: 1px 0 0 0; border-style: solid; border-color: #111; } .ui-datepicker-title { text-align: center; } .ui-datepicker-prev, .ui-datepicker-next { display: inline-block; width: 30px; height: 30px; text-align: center; cursor: pointer; line-height: 600%; overflow: hidden; } .ui-datepicker-prev { float: left; background-position: center -30px; } .ui-datepicker-next { float: right; background-position: center 0px; } .ui-datepicker thead { background-color: #f7f7f7; background-image: -moz-linear-gradient(top, #f7f7f7 0%, #f1f1f1 100%); background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f7f7f7), color-stop(100%, #f1f1f1)); background-image: -webkit-linear-gradient(top, #f7f7f7 0%, #f1f1f1 100%); background-image: -o-linear-gradient(top, #f7f7f7 0%, #f1f1f1 100%); background-image: -ms-linear-gradient(top, #f7f7f7 0%, #f1f1f1 100%); background-image: linear-gradient(top, #f7f7f7 0%, #f1f1f1 100%); filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#f7f7f7', endColorstr='#f1f1f1', GradientType=0); border-bottom: 1px solid #bbb; } .ui-datepicker th { text-transform: uppercase; font-size: 6pt; padding: 5px 0; color: #666666; text-shadow: 1px 0px 0px #fff; filter: dropshadow(color=#fff, offx=1, offy=0); } .ui-datepicker tbody td { padding: 0; border-right: 1px solid #bbb; } .ui-datepicker tbody td:last-child { border-right: 0px; } .ui-datepicker tbody tr { border-bottom: 1px solid #bbb; } .ui-datepicker tbody tr:last-child { border-bottom: 0px; } .ui-datepicker td span, .ui-datepicker td a { display: inline-block; font-weight: bold; text-align: center; width: 100%; height: 100%; color: #666666; text-shadow: 1px 1px 0px #fff; filter: dropshadow(color=#fff, offx=1, offy=1); } .ui-datepicker-calendar .ui-state-default { background: #ededed; background: -moz-linear-gradient(top, #ededed 0%, #dedede 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ededed), color-stop(100%, #dedede)); background: -webkit-linear-gradient(top, #ededed 0%, #dedede 100%); background: -o-linear-gradient(top, #ededed 0%, #dedede 100%); background: -ms-linear-gradient(top, #ededed 0%, #dedede 100%); background: linear-gradient(top, #ededed 0%, #dedede 100%); filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#ededed', endColorstr='#dedede', GradientType=0); -webkit-box-shadow: inset 1px 1px 0px 0px rgba(250, 250, 250, .5); -moz-box-shadow: inset 1px 1px 0px 0px rgba(250, 250, 250, .5); box-shadow: inset 1px 1px 0px 0px rgba(250, 250, 250, .5); } .ui-datepicker-calendar .ui-state-hover { background: #f7f7f7; } .ui-datepicker-calendar .ui-state-active { background: #6eafbf; -webkit-box-shadow: inset 0px 0px 10px 0px rgba(0, 0, 0, .1); -moz-box-shadow: inset 0px 0px 10px 0px rgba(0, 0, 0, .1); box-shadow: inset 0px 0px 10px 0px rgba(0, 0, 0, .1); color: #e0e0e0; text-shadow: 0px 1px 0px #4d7a85; filter: dropshadow(color=#4d7a85, offx=0, offy=1); border: 1px solid #55838f; position: relative; margin: -1px; } .ui-datepicker-unselectable .ui-state-default { background: #f4f4f4; color: #b4b3b3; } .ui-datepicker-calendar td:first-child .ui-state-active { margin-left: 0; } .ui-datepicker-calendar td:last-child .ui-state-active { margin-right: 0; } .ui-datepicker-calendar tr:last-child .ui-state-active { margin-bottom: 0; } 

 <script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <script type="text/javascript"> $(function() { $('#calendar').datepicker({ inline: true, showOtherMonths: true, firstDay: 1, dayNamesMin: ['Sonntag', 'Montag', 'Dienstag', 'Mittwoch', 'Donnerstag', 'Freitag', 'Samstag'], }); }); </script> <div id="calendar"></div> 

謝謝你的幫助 ：）

Answer 1

如果“ a ”標簽中的文本不包含任何子標簽，則無法使其垂直對齊。 我包與所述文本<span>下“ a使用jQuery”標記。 這是代碼：

$(".ui-datepicker td").each(function(){
    var dateText = $(this).find("a").text();
    $(this).find("a").html("<span>"+dateText+"</span>");
});

和一些簡單的CSS更改：

.ui-datepicker td a{
    display: table;
    position: relative;
    height: 100%;
    width: 100%;
}
.ui-datepicker td a span{
    display: table-cell;
    text-align:center;
    vertical-align: middle;
}

Answer 2

您只需將數字的行高設置為正方形的相同高度，就可以僅使用CSS來實現此目的：

.ui-state-default {
    height: 45px;
    line-height: 45px;
    padding: 0;
}