我嘗試將文本對齊屬性與顯示塊一起使用，但這也不起作用。我想要一個覆蓋整個網頁的 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 關注
- 166 瀏覽
添加回答
舉報
0/150
提交
取消