我想将图像与 div 的中心对齐
我尝试将文本对齐属性与显示块一起使用，但这也不起作用。我想要一个覆盖整个网页的 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回答
-
呼如林
我稍微编辑了代码以实现您想要的效果，只需将父 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; } -
拉丁的传说
这里最简单的解决方案是在 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;}希望这可以帮助！
随时随地看视频慕课网APP
相关分类
Html5