Сделать сайт по центру экрана целиком

149
29 декабря 2019, 07:20

var cvs=document.getElementById("canvas"); // подлкючаем канвас 
 
var ctx = cvs.getContext("2d"); // говорим то что наша игра 2д 
 
 
 
 
 
 
var image91=new Image(); // картинка 
 
image91.src="https://cdn.pixabay.com/photo/2018/03/08/21/49/lighthouse-3209985_960_720.jpg";  // адрес картинки 
 
function  q92(){  
ctx.drawImage(image91,0,0);   
 
} 
 
 
image91.onload=q92; // когда картинка програжена тогда и добавляю её 
 
 
 
 
 
 
 
 
 
 
 
 
bt10=document.createElement( 'BUTTON'); // создание кнопки 
bt10.id='cm10'; // её id  
bt10.textContent ='кнопка'; // её текст 
document.body.appendChild(bt10); // нужно чтобы добавилось 
.container{ 
       box-sizing: content-box; 
       max-width: 1200px; 
       margin-left: auto; 
       margin-right: auto;           
} 
 
#cm10{ 
  position: absolute; 
  top:200px;  
  left:100px; 
}
<!DOCTYPE html> 
<html> 
  <head> 
 
 <canvas id="canvas" width="1000" height="675"></canvas> <!-- полотно где отображается код --> 
 <div class="container"> 
<div class="img457"></div> 
</div> 
  </head> 
  <body> 
    
 
   <style type="text/css"> 
 
   </style> 
 
 
 
 
 
 
 
 
 
<script type="text/javascript"> 
 
 
</script> 
 
  </body> 
</html>

Сейчас весь мой сайт расположен в левом углу экрана.Размер сайта 1000 675. Как сделать чтобы он располагался строго по центру экрана если в css написать text-align: center; то только картинка будет в центре ,а кнопки нет.Все элементы должны сохранить расположения относительно картинки.[![введите сюда описание изображения][2]][2]

Answer 1

К контенеру сайта добавте такой css. Вы задаете максимальную ширину контейнера и выравнивате по центру. по поводу text-align почитайте тут http://htmlbook.ru/css/text-align 

 .container{
       box-sizing: content-box;
       max-width: 1200px;
       margin-left: auto;
       margin-right: auto;          
}

P.S. Схематично для наглядности что такое контейнер. 

<body>
    <div class="container">
         <div>Шапка сайта</div>
        <div>Контент сайта</div>
        <div>футер</div>
    </div>
</body>

P.S. Связи измененой задачей добавил новый ответ

var cvs=document.getElementById("canvas"); // подлкючаем канвас 
 
var ctx = cvs.getContext("2d"); // говорим то что наша игра 2д 
 
 
 
 
 
var image91=new Image(); // картинка 
 
image91.src="https://cdn.pixabay.com/photo/2018/03/08/21/49/lighthouse-3209985_960_720.jpg";  // адрес картинки 
 
function  q92(){  
ctx.drawImage(image91,0,0);   
 
} 
 
 
image91.onload=q92; // когда картинка програжена тогда и добавляю её 
 
 
 
 
 
bt10=document.createElement( 'BUTTON'); // создание кнопки 
bt10.id='cm10'; // её id  
bt10.textContent ='кнопка'; // её текст 
document.getElementById("container").appendChild(bt10); // нужно чтобы добавилось 
.container{ 
       box-sizing: content-box; 
       max-width: 1000px; 
       margin-left: auto; 
       margin-right: auto;  
       position:relative; 
} 
 
#cm10{ 
  position: absolute; 
  top:200px;  
  left:100px; 
}
 <div id='container' class="container"> 
      <canvas id="canvas" width="600" height="600"></canvas> 
      <div class="img457"></div> 
</div>

Answer 2

margin:0 auto; и задать необходимый размер

READ ALSO
Выводить данные с input списком
HTML

Выводить данные с input списком

Такой вопросКак при помощи ajax сделать так, чтобы после отправки данных, введенных в input, и нажатия на button, эти данные выводились списком

 147
Не подключается slick slider
HTML

Не подключается slick slider

Не работает slick slider div'ы просто стают в столбик, вот мои подключённые файлы

 199
Симуляция физики на стороне сервера
c#

Симуляция физики на стороне сервера

Есть ли какая библиотека на C# для симуляции физики ?

 163
Доступ к переменной вне блока кода
c#

Доступ к переменной вне блока кода

Как обратиться к переменной value2 вне блока кода?

 142