如何垂直降低视频 html.

我让我的网站水平对齐，现在我想垂直地把它向下撞一点，这样它就不会完全触及页面顶部，看起来很时髦。任何帮助将不胜感激，因为我是菜鸟。

<!DOCTYPE html>
<html>
<head>
<title>SimWorks Performance</title>
<style>
body {
background-color: black;
background-image: url("128.jpg");
background-repeat: repeat;
}
h1 {
color: white;
text-align: center;
}
p {
font-family: verdana;
font-size: 20px;
}
div.center iframe{
display: block;
margin-left: auto;
margin-right: auto;
}
</style>
</head>
<body>
<div class="center">
<iframe width="853" height="505" src="https://www.youtube.com/embed/m6nOEMQlb3Q?rel=0&amp;showinfo=0" frameborder="1" allow="autoplay; encrypted-media" allowfullscreen></iframe>
</div>
<br><br>
<center>
<h1 style="color:white;">COMING SOON</h1>
</center>

</body>
</html>

这将解决问题：

body {
width: 100vw;
height: 100vh;
margin: 0;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}

只需将margin-top添加到您的身体标签中即可。这是工作代码：

<!DOCTYPE html>
<html>
<head>
<title>SimWorks Performance</title>
<style>
body {
background-color: black;
background-image: url("128.jpg");
background-repeat: repeat;
margin-top:100px;
}
h1 {
color: white;
text-align: center;
font-family: Fantasy;
font-size: 10px;
}
p {
font-family: verdana;
font-size: 20px;
}
div.center iframe{
display: block;
margin-left: auto;
margin-right: auto;
}
</style>
</head>
<body>
<div class="center">
<iframe width="853" height="505" src="https://www.youtube.com/embed/m6nOEMQlb3Q?rel=0&amp;showinfo=0" frameborder="1" allow="autoplay; encrypted-media" allowfullscreen></iframe>
</div>
<br><br>
<center>
<h1 style="color:white;">COMING SOON</h1>
</center>
</body>
</html>

我已经编辑了我的答案来解决字体问题。不要将它们放在您的身体标签中，因为它将应用于所有元素。而是将它们放在 h1 中，这样它只会应用于 h1 元素。

您可以根据需要尝试使用填充

左填充

.body {
background-color: black;
background-image: url("128.jpg");
background-repeat: repeat;
padding-left:20px;
}

顶部填充

.body {
background-color: black;
background-image: url("128.jpg");
background-repeat: repeat;
padding-top:20px;
}

整体填充

.body {
background-color: black;
background-image: url("128.jpg");
background-repeat: repeat;
padding:20px;
}

相关内容

最新更新

热门标签：