Как центрировать элемент на экране? - PullRequest
Новая
       5

Как центрировать элемент на экране?

0 голосов
/ 04 августа 2020

вот пример. https://codepen.io/vi000246/full/VwaZJOb

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="reset.css">
    <link rel="stylesheet" type="text/css" href="style.css">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@400;500;700&display=swap" rel="stylesheet">

    <title>TESTSTR INVITE CODE</title>
    <div class="title">
        <img src="https://via.placeholder.com/150x80" alt="LOGO">
        <p class="bigSize mainTitle">TESTSTR INVITE CODE</p></div>

</head>

<body>
    <div class="wrap">
        <div class="item">
        <form action="" class="form1">
            <label for="iCode" class="regSize">please input code</label>
            <input type="text" class="inviteCode" placeholder="cooooood" name="iCode"><br><br>
            <input type="submit" class="send" value="send">
            <input type="reset" class="clear" value="clear">
        </form></div>
    </div>
    
</body>




</html>

Я хочу центрировать весь элемент в div. Поле ввода «ТЕСТСТР ИНВАЙТ-КОД» «введите код» и две кнопки. Я попробовал position: relative и absolute text-align: center display: inline-block, но все еще не могу переместить горизонтальный центр элемента. как настроить css для достижения такого результата?

1 Ответ

3 голосов
/ 04 августа 2020

Вы можете использовать flex на теле (если это ваш единственный элемент): 

html {
  height: 100%;
}

body {
  width: 100%;
  min-height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
<div class="wrap">
  <div class="item">
    <form action="" class="form1">
      <label for="iCode" class="regSize">please input code</label>
      <input type="text" class="inviteCode" placeholder="cooooood" name="iCode"><br><br>
      <input type="submit" class="send" value="send">
      <input type="reset" class="clear" value="clear">
    </form>
  </div>
</div>

Также вам нужно удалить div из вашего раздела головы - он недействителен

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

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

...