Я хочу выровнять изображение к центру div - PullRequest
Новая
       0

Я хочу выровнять изображение к центру div

0 голосов
/ 27 марта 2020

Я пытался использовать свойство 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;
    }

Ответы [ 2 ]

0 голосов
/ 27 марта 2020

Я немного редактирую код, чтобы добиться того, чего вы хотите, просто добавьте родительский 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;
    }
0 голосов
/ 27 марта 2020

Самым простым решением здесь было бы сделать фоновое изображение divs в CSS вместо использования тега image. Примерно так: 

<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;

}

Надеюсь, это поможет!

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...