Question

我正在制作我的第一个网页模板，但我遇到了一些问题。我正在使用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给我的代码。这些代码就是表格。

我该怎么做呢？

Answer 1

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

例如：

<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。

在浏览器上居中元素

1 个答案: