Выравнивание центра по координатам в окне просмотра - PullRequest
Новая
       1

Выравнивание центра по координатам в окне просмотра

0 голосов
/ 12 февраля 2020

Я учусь CSS, я новичок в этой области. Пожалуйста, извините, если мои вопросы наивны.

У меня есть простой HTML, содержащий 1 div. 

.square {
  background-color: blue;
  width: 90vw;
  height: 90vh;
  margin-left: 5vw;
  margin-right: 5vw;
}
<!doctype html>

<head>
  <link href="viewport-cord.css" rel="stylesheet" type="text/css" />
</head>

<body>
  <div class='square'></div>
</body>

Я ожидаю отступ в 5% ширины области просмотра с обеих сторон div. Тем не менее, кажется, что у нас более широкий разрыв в левой части div по сравнению с правым. Я не уверен, откуда взялась эта дополнительная маржа.

Image showing the div when opened in chrome with dev tools showing margins.

Ответы [ 2 ]

1 голос
/ 12 февраля 2020

Вы можете сделать это: дать максимум с и затем вычесть 10% (по 5% с каждой стороны), затем центрировать квадрат с полем auto.

CSS

.square {
    background-color: blue;
    width: calc(100vw - 10%);
    height: 100vh;
    margin: 0 auto;
}

ДЕМО ЗДЕСЬ

0 голосов
/ 12 февраля 2020

Поскольку вы сказали, что вы новичок в HTML & CSS, позвольте мне дать вам краткое описание того, как присоединить виджет элемента на основе области просмотра.

Область просмотра

Окно просмотра - это область вашего браузера, где отображается фактический контент - другими словами, ваш веб-браузер без панелей инструментов и кнопок. Единицами измерения являются vw, vh, vmin и vmax. Все они представляют собой процент от размеров браузера (области просмотра) и соответственно масштабируются при изменении размера окна.

Допустим, у нас есть область просмотра размером 1000px (ширина) на 800px (высота):

  • vw - представляет 1% ширины области просмотра. В нашем случае 50vw = 500px.
  • vh - процент от высоты окна. 50vh = 400 пикселей
  • vmin - процент от минимума двух.

В нашем примере 50vmin = 400px, поскольку мы находимся в ландшафтном режиме. vmax - процент от большего измерения. 50vmax = 500px.

Вы можете использовать эти единицы измерения в любом месте, где можно указать значение в пикселях, например, width, height, margin, font-size и more, Они будут пересчитаны браузером при изменении размера окна или поворота устройства.

case 1

Теперь, учитывая вашу проблему, я не вижу никаких изменений в ширине с обеих сторон, потому что если вы видите инспектор-> макет-> поле , то на обеих сторонах экрана вы увидите 64 .

case 2

Если вы действительно снова видите изменения в вашей системе. Попробуйте удалить внешний CSS, который вы упомянули, чтобы выяснить, вызывает ли это какую-либо проблему, а затем введите margin:0px для html и body.

Надеюсь, эта помощь вас не устраивает ...

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...