我想将图像对齐到div的中心,但无法这样做

 收藏

我试图对显示块使用text-align属性,但这也不起作用。我想要一个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;
    }
回复
  • 您可以执行以下操作:

    add left:0 and align your image as you want.

    .mountain {
      left: 0;     
     }
    

    I was not able to add entire code here since mountain image was not picking in SO,hence added screen shot from fiddler.

    for the text programmer you may have to play around on z-index to get it fixed, hope that is not an issue.

    enter image description here