Я делаю сайт, который по причинам тестирования я назвал yeet.io.

В настоящее время я пытаюсь центрировать input и h1 внутри div как по вертикали, так и по горизонтали, но по какой-то причине элементы всегда как-то смещены.

Почему это? Я хочу, чтобы элементы были центрированы по центру, как любая обычная игра «io». У меня есть jQuery, который заставляет элементы исчезать, это может быть проблемой? Я в тупике.

$(".yeet").hide();
$(document).ready(function() {
  $(".yeet").show(2000);
  $(".nickname").show(2000);
});
body {
  width: 100%;
  height: 100%;
}

.container {
  text-align: center;
  position: absolute;
  height: 100%;
  width: 100%;
  display: table;
}

.yeet {
  font-family: "Schoolbell", cursive;
  font-size: 75px;
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}

.nickname {
  font-family: "Schoolbell", cursive;
  display: block;
  margin: 0 auto;
  text-align: center;
}
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <link href="https://fonts.googleapis.com/css?family=Schoolbell" rel="stylesheet">
</head>

<body>
  <div class="container">
    <h1 class="yeet">yeet.io</h1>
    <input class="nickname" placeholder="nickname" , autofocus="autofocus">
  </div>
</body>
1
baranskistad 28 Авг 2017 в 05:07

3 ответа

Лучший ответ

В настоящее время вы используете table, установив display: table в .container и display: table-cell в .yeet.

Это, вероятно, непреднамеренно, и на самом деле простое удаление этих двух объявлений автоматически приводит к желаемому результату - вам вообще не нужно изменять HTML или создавать какие-либо новые правила CSS.

$(".yeet").hide();
$(document).ready(function() {
  $(".yeet").show(2000);
  $(".nickname").show(2000);
});
body {
  width: 100%;
  height: 100%;
}

.container {
  text-align: center;
  position: absolute;
  height: 100%;
  width: 100%;
}

.yeet {
  font-family: "Schoolbell", cursive;
  font-size: 75px;
  vertical-align: middle;
  text-align: center;
}

.nickname {
  font-family: "Schoolbell", cursive;
  display: block;
  margin: 0 auto;
  text-align: center;
}
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <link href="https://fonts.googleapis.com/css?family=Schoolbell" rel="stylesheet">
</head>

<body>
  <div class="container">
    <h1 class="yeet">yeet.io</h1>
    <input class="nickname" placeholder="nickname" , autofocus="autofocus">
  </div>
</body>

Надеюсь это поможет! :)

2
Obsidian Age 28 Авг 2017 в 02:22

Вам нужно обернуть каждый элемент в свою собственную фальшивую строку таблицы

$(".yeet").hide();
$(document).ready(function() {
  $(".yeet").show(2000);
  $(".nickname").show(2000);
});
body {
  width: 100%;
  height: 100%;
}

.container {
  text-align: center;
  position: absolute;
  height: 100%;
  width: 100%;
  display: table;
}

.yeet {
  font-family: "Schoolbell", cursive;
  font-size: 75px;
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}

.nickname {
  font-family: "Schoolbell", cursive;
  display: block;
  margin: 0 auto;
  text-align: center;
}

.row{
  display:table-row;
 }
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <link href="https://fonts.googleapis.com/css?family=Schoolbell" rel="stylesheet">
</head>

<body>
  <div class="container">
    <div class="row">
      <h1 class="yeet">yeet.io</h1>
    </div>
    <div class="row">
      <input class="nickname" placeholder="nickname" , autofocus="autofocus">
      </div>
  </div>
</body>
1
Charlie 28 Авг 2017 в 02:16
$(".yeet").hide();
$(document).ready(function() {
  $(".yeet").show(2000);
  $(".nickname").show(2000);
});
body {
  width: 100%;
  height: 100%;
}

.container {
  text-align: center;
  position: absolute;
  height: 100%;
  width: 100%;
}

.yeet {
  font-family: "Schoolbell", cursive;
  font-size: 75px;
  text-align: center;
}

.nickname {
  font-family: "Schoolbell", cursive;
  text-align: center;
}
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <link href="https://fonts.googleapis.com/css?family=Schoolbell" rel="stylesheet">
</head>

<body>
  <div class="container">
    <h1 class="yeet">yeet.io</h1>
    <input class="nickname" placeholder="nickname" , autofocus="autofocus">
  </div>
</body>
1
Saw Zin Min Tun 28 Авг 2017 в 02:26