我尝试将文本对齐属性与显示块一起使用，但这也不起作用。我想要一个覆盖整个网页的 div，山图像中心在其底部对齐。我设法通过设置bottom:0;将山图像移动到底部。但后来我无法居中对齐图像。非常感谢。 <!-- following is the html code: --> <body> <div class="topcontainer"> <img class="topcloud" src="images/newcloud.png" alt="cloud-image"> <h1>I'm Mohit</h1> <p class="occupation">A <span>pro</span>grammer</p> <img class="bottomcloud" src="images/newcloud.png" alt="cloud-image"> <img class="mountain" src="http://seanhalpin.io/assets/img/content/home/masthead/land.svg" alt=""> </div> </body> <!-- and this is the css: --> body { margin: 0; text-align: center; font-family: 'Merriweather', serif; } h1 { margin: 0; font-family: 'Sacramento', cursive; font-size: 70px; color: #30e3ca; } h2 { font-family: 'Montserrat', sans-serif; } h3 { font-family: 'Montserrat', sans-serif; } span { text-decoration: underline; } .mountain { display: inline-block; position: absolute; bottom: 0; } .topcontainer { display: inline-block; background-color: #e4f9f5; margin-bottom: 20px; height: 100vh; width: 100%; position: relative; } .bottomcloud { position: absolute; left:300px; height: 94.28px; width: 177.3333px; } .topcloud { position: relative; left: 290px; height: 94.28px; width: 177.3333px; }
2 回答
呼如林
TA贡献1798条经验 获得超3个赞
我稍微编辑了代码以实现您想要的效果，只需将父 div 添加到图像标签并设置其样式即可。所以这是我的解决方案，希望对您有所帮助。HTML：
<body>
<div class="topcontainer">
<img class="topcloud" src="images/newcloud.png" alt="cloud-image">
<h1>I'm Mohit</h1>
<p class="occupation">A <span>pro</span>grammer</p>
<img class="bottomcloud" src="images/newcloud.png" alt="cloud-image">
<div class="mountain">
<img class="mountain" src="http://seanhalpin.io/assets/img/content/home/masthead/land.svg" alt="">
<div>
</div>
</body>
CSS：
body {
margin: 0;
text-align: center;
font-family: 'Merriweather', serif;
}
h1 {
margin: 0;
font-family: 'Sacramento', cursive;
font-size: 70px;
color: #30e3ca;
}
h2 {
font-family: 'Montserrat', sans-serif;
}
h3 {
font-family: 'Montserrat', sans-serif;
}
span {
text-decoration: underline;
}
.mountain {
display: flex;
justify-content: flex-end;
align-items: center;
position: absolute;
bottom: 0;
}
.topcontainer {
display: inline-block;
background-color: #e4f9f5;
margin-bottom: 20px;
height: 100vh;
width: 100%;
position: relative;
}
.bottomcloud {
position: absolute;
left:300px;
height: 94.28px;
width: 177.3333px;
}
.topcloud {
position: relative;
left: 290px;
height: 94.28px;
width: 177.3333px;
}
拉丁的传说
TA贡献1789条经验 获得超8个赞
这里最简单的解决方案是在 CSS 中制作 div 背景图像，而不是使用图像标签。像这样的东西：
<div class="topcontainer">
//other stuff in here
</div>
.topcontainer {
height: 100vh;
width: 100vw;
background-image: url('http://seanhalpin.io/assets/img/content/home/masthead/land.svg');
background-repeat: no-repeat;
background-position: bottom;
}
希望这可以帮助！
- 2 回答
- 0 关注
- 83 浏览
添加回答
举报
0/150
提交
取消