Html 当我在一个部分中使用marging时,会得到空白
我想做的是在我试过的部分中间放置一个div,边距:2%自动代码>但它看起来像这样(背景没有填充) 这是代码的链接 这是我的htmlHtml 当我在一个部分中使用marging时,会得到空白,html,css,Html,Css,我想做的是在我试过的部分中间放置一个div,边距:2%自动但它看起来像这样(背景没有填充) 这是代码的链接 这是我的html {%load static%} <!DOCTYPE html> <html lang="en"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name=&quo
{%load static%}
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- CSS -->
<link rel="stylesheet" href={%static 'css/translate_page.CSS' %}>
<link href='https://fonts.googleapis.com/css?family=Bangers' rel='stylesheet'>
<title>translate</title>
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
</head>
<body>
{% include "nav.html" %}
<style>
a.active-translate-page{
background: #33ccff ;
</style>
</body>
<section class="container">
<div class="the-form">
</div>
</section>
</html>
顺便说一句,在这种情况下,您可以使用django来尝试flex布局:
.container {
display: flex;
background: linear-gradient(to bottom, #33ccff 5%, #7882f3 50%);
background-size: cover;
width: 100%;
height: calc(100vh - 80px);
align-items: center;
justify-content: center;
}
.the-form {
width: 600px;
height: 500px;
background: #fff;
border-radius: 2%;
}
你的HTML无效?你能详细说明一下吗?同样的,它不起作用。我认为你的问题是将
水平和垂直地集中在
内。所以,请试试我的最新答案。哦,我试过了,效果很好,谢谢
.container {
display: flex;
background: linear-gradient(to bottom, #33ccff 5%, #7882f3 50%);
background-size: cover;
width: 100%;
height: calc(100vh - 80px);
align-items: center;
justify-content: center;
}
.the-form {
width: 600px;
height: 500px;
background: #fff;
border-radius: 2%;
}