Question

我正在建立一个网站，出于测试原因我打电话给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>

Answer 1

您目前正在使用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>

希望这有帮助！：）

Answer 2

您需要将每个元素包装在自己的假表格行

中

＆＃13;

$(".yeet").hide();
$(document).ready(function() {
  $(".yeet").show(2000);
  $(".nickname").show(2000);
});

＆＃13;

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;
 }

＆＃13;

<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>

＆＃13;

Answer 3

＆＃13;

$(".yeet").hide();
$(document).ready(function() {
  $(".yeet").show(2000);
  $(".nickname").show(2000);
});

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

div中的中心元素似乎偏离中心

3 个答案: