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" タグの縦のalignテキストことができないのは、どの子タグを含まない場合。私は<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; 
}