如何在不使用绝对位置的情况下在div的底部和中心获取img

问题描述 投票:1回答:2

我在HTML和CSS上还很陌生(2周),这是iam第一次使用Stack溢出。我试图将img的位置放在div的底部以及底部侧面的中心,并且无法找到解决方案。我想在不使用位置的情况下执行此操作:绝对,因为在较小/较大的屏幕上打开页面时,img会移动。

这是我要移动的这张图片:“<img class="mnt" src="mountain.png" alt="mountain image">

body { 
  text-align: center;
  margin:0;
}
 
h1 {
  font-size: 5.6rem;
  margin:0;
  color: white;
  line-height: 2;
  font-family: 'Clicker Script', cursive;
}
    
h2 {
  font-weight: normal;
  font-family: 'Kavivanar', cursive;
}
    
.nav {
  background-color: #87c6eb;
  text-align: right;
  padding-top: 50px;
}

.top {
  background-color: #87c6eb;
  height: 100vh;
}
    
.programer {
  font-size: 150%;
  color: white;
}

.top-cloud {
  position:absolute;
  top:100px;
  right: 300px;
  opacity: 70%;    
}
    
.bottom-cloud {
  position:absolute;
  left: 350px;
  opacity: 45%;   
}
    
.mnt {
  /* ???????? */
}
<div class="top">
  <nav class="nav">
    <a href="#About" class="navigation">About</a>
    <a href="#Work" class="navigation">Work</a>
    <a href="#contact" class="navigation">Contact</a>
  </nav>
  <img class="top-cloud" src="cloud.png" alt="cloud img">
  <h1>I`m Veljko</h1>
  <h2 class="programer"><em>future programmer</em></h2>
  <img class="bottom-cloud" src="cloud.png" alt="cloud img">
  <img class="mnt"  src="mountain.png" alt="mountain img">
</div>

我在HTML和CSS上还很陌生(2周),这是iam第一次使用Stack溢出。我试图将img的位置放在div的底部以及底部侧面的中心,并且...

html css
2个回答
0
投票

您可以尝试一下,它对我有用。


0
投票

使用flex非常简单,我将.top高度增加到300vh,因此您可以在这里轻松看到结果,

© www.soinside.com 2019 - 2024. All rights reserved.