垂直對齊：中間爲響應網頁

我加垂直對齊Fullcalendar天數：中間爲所有TD天的編號：垂直對齊：中間爲響應網頁

#calendar td { 
    vertical-align: middle !important; 
}

但沒有爲響應網頁工作的第一列： enter image description here 我該如何解決它？

我嘗試在％和em中添加margin-top，它在平板電腦，機器人上的工作不適用於PC瀏覽器。

UPDATE：對的jsfiddle添加代碼：http://jsfiddle.net/8ctRu/

HTML

<div id='calendar'></div>

CSS

#calendar td { 
    vertical-align: middle !important; 
    border: 1px solid #000; 
} 
.fc { 
    text-align: center !important; 
} 

.fc td { 
    padding: 0; 
    vertical-align: middle !important; 
}

jQuery的

$('#calendar').fullCalendar({ 
    header: { 
     left: 'prev', 
     center: 'title', 
     right: 'next' 
    }, 
    dayClick: function(date, allDay, jsEvent, view) { 
     var now = new Date(); 

     if (date.setHours(0,0,0,0) > now.setHours(0,0,0,0)){ 
      $(this).toggleClass("blackAndWhite"); 
     } else { 
      $(tempVar).css({ 
       'background-color':'white', 
       'color' : '#000' 
      }); 
     } 

    } 
});

來源

2013-10-11 Gene

請張貼的HTML代碼。 –

添加代碼：http://jsfiddle.net/8ctRu/ – Gene

這是一個JavaScript問題。如果你看看td裏面的div，通過JS應用最小高度。這可以防止垂直對齊按照您的預期工作。 – cimmanon

的vertical-align: middle;沒有做的工作，因爲div在td內部被JavaScript設置爲min-height。

到div加入line-height（等於計算min-height）與min-height沿和內容都會得到正確對齊。

您可以使用下面的代碼。

function setLineHeight() { 
    var body = $(document).find('tbody'); 
    var bodyRows = body.find('tr'); 
    var bodyFirstCells = bodyRows.find('td:first-child'); 
    var cell; 
    bodyFirstCells.each(function (i, _cell) { 
     if (i < 7) { 
      cell = $(_cell); 
      var minHeight = cell.find('> div').css('min-height'); /* get computed min-height value */ 
      cell.find('> div').css(
       'line-height', 
      minHeight); /* set the obtained min-height as line-height */ 
     } 
    }); 

} 

$(document).ready(function() { 
    setTimeout(setLineHeight, 1000); 
}); 
$(window).resize(function() { 
    setTimeout(setLineHeight, 1000); /* to make sure that the plugin calculates the min-height before calling our function */ 
});

Demo Fiddle | Full Screen Result

注：更妙的辦法是創建插件的定製版本，並從內部將其設置的line-height。

來源

2013-10-11 15:43:16 Harry

最小高度是動態調整瀏覽器調整大小。對我來說，這些細胞高度爲57px。 – cimmanon

@cinnamon：Yup隊友，剛纔注意到了。規則可以分配給'fc-first'類，只需要計算出百分比即可。 – Harry

實際上甚至不是'fc-first'，因爲Day標題似乎也在使用它。 – Harry

-1

可以刪除垂直對齊，並添加padding-top或margin-top

來源

2013-10-11 15:20:42

「vertical-align」有什麼問題？爲什麼要改變這種方法，特別是在其他欄目看起來好的時候呢？ – Harry

沒有足夠的信息來說明爲什麼垂直對齊無法正常工作。我建議嘗試另一種選擇（注意我說「CAN」）。如果他離開垂直對齊，並嘗試添加填充或邊距頂部，我假設左側列將居中，其餘將接近底部 –

那麼這應該是一個建議/評論在我看來。 – Harry

min-height:64px是扔你離開.. 把height:64px容器上<td>

來源

2013-10-11 15:35:02

這將以垂直方向爲中心，無JS。不知道它會對事件做些什麼。

添加到您的演示：http://jsfiddle.net/8ctRu/10/

.fc-day:first-child > div:first-child { 
    position: relative; 
} 

.fc-day:first-child > div:first-child .fc-day-number { 
    position: absolute; 
    top: 50%; 
    left: 0px; 
    right: 0px; 
    text-align: center; 
    margin-top: -.5em; 
    line-height: 1em; 
}

來源

2014-05-26 19:00:04

垂直對齊：中間爲響應網頁

回答

相關問題