У меня проблема с позицией элемента div - PullRequest
Новая
       17

У меня проблема с позицией элемента div

0 голосов
/ 26 мая 2019

Я пытаюсь быстро расположить элемент div в центре, но верхний левый угол действует так, как я хочу (он идет в центр вместо всего div), что мне делать? 

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <body>
  <div class="container"></div>
  <input class="click-button" type="button" name="button" value="Click" onclick="clearWrite()"></button>
  <p id="text"></p>
    <script type="text/javascript" src="js/javascript.js"></script>
  </body>
</html>

body {
  background-color: rgba(75, 75, 75, 0.7); }

.container {
  background-color: white;
  height: 360px;
  width: 640px;
  position: absolute;
  top: 50%;
  left: 50%; 
}

1 Ответ

1 голос
/ 26 мая 2019

При использовании translate (-50%, - 50%) он сместится по оси Y и X до 50% его высоты и ширины. 

body {
  background-color: rgba(75, 75, 75, 0.7);
}

.container {
  background-color: white;
  height: 200px;
  width: 200px;
  position: absolute;
  top: 50%;
  left: 50%; 
  transform: translate(-50%, -50%); /** add this **/
}
<!DOCTYPE html>
<html>
<body>
  <div class="container"></div>
  <input class="click-button" type="button" name="button" value="Click" onclick="clearWrite()">
  <p id="text"></p>
  <script type="text/javascript" src="js/javascript.js"></script>
  </body>
  </html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...