Центрирующие элементы в браузере

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

Чтобы центрировать ваш стол по горизонтали, все, что вам нужно сделать, это дать вашей таблице свойства/значения 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.