个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
24
4
我正在制作一个网站，出于测试原因，我将其命名为 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>最佳答案
您当前正在使用 table，通过在 .container 上设置 display: table 和 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>希望对您有所帮助! :)
关于javascript - div 中居中的元素似乎偏离了中心，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45910967/
24
4
0
我是一名优秀的程序员,十分优秀！