Html 有没有办法将H1居中放置在div底部?
我试过的东西都不管用,我需要简单的代码,我可以用它把它放在那个div的底部,而不是把整个div变成一个网格,只把底部的网格变成文本。我不熟悉html/css,所以老实说,我只知道页面上真正的内容。垂直对齐底部也不起作用Html 有没有办法将H1居中放置在div底部?,html,css,text,positioning,Html,Css,Text,Positioning,我试过的东西都不管用,我需要简单的代码,我可以用它把它放在那个div的底部,而不是把整个div变成一个网格,只把底部的网格变成文本。我不熟悉html/css,所以老实说,我只知道页面上真正的内容。垂直对齐底部也不起作用 <!DOCTYPE html> <html> <head> <title>Making a Shop Landing Page</title> </head> <style> *{
<!DOCTYPE html>
<html>
<head>
<title>Making a Shop Landing Page</title>
</head>
<style>
*{
box-sizing:border-box;
margin:0;
padding:0;
}
body{
background-color:#eee;
}
main{
height:100%;
}
html, body {
height:100%;
margin:0;
}
.container{
display:grid;
grid-template-areas:
"header header header"
"ads main main"
"footer footer footer";
height:100%;
width:100%;
grid-template-rows:20% 70% 10%;
grid-template-columns:20% 80%;
}
.grid-item{
border:black solid 3px;
}
.header{
grid-area:header;
}
.ads{
grid-area:ads;
width:100%;
}
.main{
grid-area:main;
height:100%;
}
.footer{
grid-area:footer;
}
#navbar {
height: 100px;
width: 100%;
position: fixed;
top: 0;
left: 0;
background-color: #eee;
padding: 0;
margin: 0;
border:black solid 2px;
}
#header{
text-align:center;
vertical-align:bottom;
}
</style>
<body>
<main>
</div>
<div class="container">
<div class="header grid-item">
<h1 id="header">This is the Title</h1>
</div>
<div class="ads grid-item"><p>awdsmapwdsmaswdpawmda wdawpmds awpdsmawp dmaw </p></div>
<div class="main grid-item">
<h1>awdawdaswdawd awdasw daw dsawd awd aw dawd awda dwa daw daw wdaw;lds anmw;dsnaswsd nwa;lds naw;kd nwa;ds naw;dn aw awdknawidgawpidhawd'ajdswn'awnda'swnda'wdnasw'dnaw'dnawds'awndanlw'dl </h1>
</div>
<div class="footer grid-item"></div>
</div>
</main>
</body>
</html>
制作商店登录页
*{
框大小:边框框;
保证金:0;
填充:0;
}
身体{
背景色:#eee;
}
主要{
身高:100%;
}
html,正文{
身高:100%;
保证金:0;
}
.集装箱{
显示:网格;
网格模板区域:
“标题”
“主广告”
“页脚”;
身高:100%;
宽度:100%;
网格模板行:20%70%10%;
网格模板柱:20%80%;
}
.表格项目{
边框:黑色实心3px;
}
.标题{
网格区域:标题;
}
.广告{
网格区域:ads;
宽度:100%;
}
梅因先生{
网格区域:主;
身高:100%;
}
.页脚{
网格区域:页脚;
}
#导航栏{
高度:100px;
宽度:100%;
位置:固定;
排名:0;
左:0;
背景色:#eee;
填充:0;
保证金:0;
边框:黑色实心2px;
}
#标题{
文本对齐:居中;
垂直对齐:底部对齐;
}
这是标题
awdsmapwdsmaswdpawmda wdawpmds awpdsmawp dmaw
awdawswaw awdawswaw dsawd awd awd awd awd awd awd awd dwa daw aw wdaw;lds anmw;dsnaswsd nwa;lds naw;kd nwa;ds-naw;dn awdknawidgawpidhawd'ajdswn'awnda'wdnasw'dnaw'dnawds'awndanlw'dl
要使其位于div的底部,您可以将其所在位置的容器设置为相对位置,然后将文本设置为绝对位置,并将其放置在您想要的位置
.header{
position: relative;
}
#header{
position: absolute;
bottom: 0px;
left: 50%;
}
尝试添加给定的代码
.header{
网格区域:标题;
显示器:flex;
对齐项目:柔性端;
证明内容:中心;
}
请不要只发布代码作为答案,还要解释代码的作用以及如何解决问题。带解释的答案通常更有帮助,质量更好,更有可能吸引更多的选票。有没有办法让它更具响应性?非常感谢,我会尝试反向工程,这样我就知道它们的作用了,非常感谢!!