我正在制作我的第一个Web模板,但是有一些问题。我正在使用FullPage.js script,并且希望将使用此脚本添加的内容在垂直和水平方向上居中。这是我正在做的网站(fullpagewebsite.blogspot.com)。

如您所见,如果您使用键盘向下滚动,则会显示新内容。但这内容显示在那个奇怪而丑陋的位置(左上角)。

我希望此内容位于页面的中心。

<table id="Table_01" width="900" height="400" border="0" cellpadding="0" cellspacing="0">
    <tr>
        <td colspan="5">
            <img src="BrowserPreview_tmp_01.png?1424981576" width="900" height="225" alt=""></td>
    </tr>
    <tr>
        <td rowspan="2">
            <img src="BrowserPreview_tmp_02.png?1424981576" width="84" height="175" alt=""></td>
        <td>
            <img src="BrowserPreview_tmp_03.png?1424981576" width="350" height="122" alt=""></td>
        <td>
            <img src="BrowserPreview_tmp_04.png?1424981576" width="52" height="122" alt=""></td>
        <td>
            <img src="BrowserPreview_tmp_05.png?1424981576" width="344" height="122" alt=""></td>
        <td>
            <img src="BrowserPreview_tmp_06.png?1424981576" width="70" height="122" alt=""></td>
    </tr>
    <tr>
        <td colspan="4">
            <img src="BrowserPreview_tmp_07.png?1424981576" width="816" height="53" alt=""></td>
    </tr>
</table>


是的,我知道我正在使用表格,但我知道这不是一个好主意。但是我需要与Photoshop以及Photoshop给我的代码一起工作。这些代码是表格。

我该怎么做才能做到这一点?

最佳答案

要使表格水平居中,您要做的就是为表格提供css属性/值“ margin-left:auto; margin-right:auto;”。

因此,例如:

<table id="Table_01" width="900" height="400" border="0" cellpadding="0" cellspacing="0" style=" margin-left: auto; margin-right: auto; ">


就垂直居中而言,这比较棘手。您可以使用预定义的静态边距(例如:“ margin-top:20px;”)来完成此操作,也可以使用Javascript获取表格的高度,然后决定将其压下的高度。

一些可以工作的JS的示例如下:

<script>
$('#fullpage table').each(function() {
  $(this).css('margin-top', function(){
    return ($(this).parent().height() - $(this).height()) / 2;
  });
});
</script>


它会在页面底部。

编辑,
现在也有CSS形式的选项可以进行垂直居中,但根据范围的不同,它可能会变得乏味。有关此路线的更多信息,请参见Flexbox。

07-24 09:44
查看更多