Блог

Главная - Вопросы по программированию - Как мне сохранить центр div, когда окно браузера становится меньше размера div?

Как мне сохранить центр div, когда окно браузера становится меньше размера div?

#javascript #html #css

#javascript #HTML #css

Вопрос:

По сути, когда окно браузера увеличивается, div остается центрированным и создает пустое пространство снаружи. Я хочу, чтобы то же самое происходило, когда окно браузера становится меньше. Я хочу видеть меньше div, но держать его по центру. На данный момент я вижу меньше div, но левая сторона блокируется, поэтому в итоге я вижу только смещение левой части изображения (вместо центра). Извините, если это сложный способ спросить, я новичок в программировании. Любая помощь будет принята с благодарностью! Заранее спасибо! 🙂

ps Я также изо всех сил пытаюсь воспроизвести видео, если кто-нибудь тоже может помочь с этим

Вот мой код на данный момент

 body {
  font-family: 'Noto Sans', sans-serif;
  margin: 0;
  padding: 0;
}

#page-container {
  width: 1920px;
  margin: auto;
}  
 <div id="page-container">
  <video id="backgroundvid" width="auto" autoplay>
    <source  src="assets/video/portalAnimLowRes.mp4" type="video/mp4">
  </video>
</div>

Комментарии:

1. Привет, Бен, и добро пожаловать в SO. Вы имеете в виду адаптивное масштабирование, когда видео находится в вертикальном и горизонтальном центре?

2. Спасибо 🙂 Да, но только горизонтальный центр. Приведенное ниже предложение Селима Ахура сработало отлично! : D Есть мысли о том, почему мое видео не работает?

3. Видео, как правило, блокируется для воспроизведения, если у них нет muted атрибута. Это предотвращает раздражающий запуск видео сайтами без вашего разрешения. В противном случае может быть, что путь к вашему файлу неверен. И хотя ответ Селима работает, это метод старой школы. Если вы начинаете и готовы учиться, тогда проверьте Flexbox и CSS Grid для создания ваших макетов.

4. Да, спасибо, это работает отлично!

Ответ №1:

Вы можете попробовать

 #page-container {
    width:1920px;
    margin-left: -960px;
    position: relative;
    left: 50%;
}

Ответ №2:

Вы можете поместить pageContainer в absolute положение следующим образом.

 #page-container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 1920px;
}

Ответ №3:

Вам действительно нужна горизонтальная полоса прокрутки?

Если вы этого не сделаете, я предпочитаю не определять ширину (особенно в пикселях), поскольку ширина каждого устройства различна.

Вместо этого вы можете определить ширину как width:100% или width:100vw , это помогает уместить div в соответствии с размером экрана.

Вы можете попробовать этот код:

 body {
  font-family: 'Noto Sans', sans-serif;
  margin: 0 auto;
  padding: 0;
}
#page-container {
  width: 100%;
  margin: auto;
}

Ответ №4:

Как насчет использования flexbox?

 body {
  font-family: 'Noto Sans', sans-serif;
  margin: 0;
  padding: 0;
}

#page-container {
  width: 1920px;
  display: flex;
  align-items: center;
  justify-content: center;
}  
 <div id="page-container">
  <img src="https://placeimg.com/640/480/any">
</div>